Имеем главный div-блок с "background: #fff" (div1).
Внутри этого блока находятся два других div-блока:
div11 - картинка с фильтром "grayscale: 100%" (черно-белая) и
div12 - текст со стилем "display:none" (текст скрыт).
Итого, имеем такую структуру:
<div class="div1"> блок со стилем background:#FFF
<div class="div11"> картинка с фильтром grayscale 100% </div>
<div class="div12"> текст со стилем display:none </div>
</div>
Нужно сделать так, чтобы при наведении мыши на главный div1-блок происходило сразу 3 процесса:
- Менялся цвет фона в блоке div1.
- В блоке div11 фильтр grayscale был равен 0%.
- В блоке div12 стиль стал display:block.
Т.е. должно получиться так:
<div class="div1"> background:#F00
<div class="div11"> картинка с фильтром grayscale 0% </div>
<div class="div12"> текст со стилем display:block </div>
</div>
Как это сделать?
Как заставить hover одного блока указывать стиль для других блоков?
Заранее благодарен.