1

Имеем главный 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 процесса:

  1. Менялся цвет фона в блоке div1.
  2. В блоке div11 фильтр grayscale был равен 0%.
  3. В блоке div12 стиль стал display:block.

Т.е. должно получиться так:

<div class="div1"> background:#F00
            <div class="div11"> картинка с фильтром grayscale 0% </div>
            <div class="div12"> текст со стилем display:block </div>
    </div>

Как это сделать?
Как заставить hover одного блока указывать стиль для других блоков?

Заранее благодарен.

2 ответа 2

1

Внезапно меня осенило:

div1:hover {
background: #f00;
}

div1:hover div11{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}

div1:hover div12{
display: block;
}
1

http://jsfiddle.net/j7z1s31g/

HTML

<div class="div1">
    <div class="div11"><img src="https://lh3.googleusercontent.com/-kfMqJ_gNFqI/TxhBpIguhNI/AAAAAAAAABU/lFKF147J_Pc/s150-c/photo.jpg" alt="" /></div>
      <div class="div12">текст со стилем display:none</div>
</div>

CSS

div{}
.div1{
    background: #fff;
    border: 1px solid #000;    
}
.div11 img{
    -webkit-filter: grayscale(100%);
}
.div12{
    display: none;    
}

.div1:hover{
    background: #ccc;    
}
.div1:hover img{
    -webkit-filter: grayscale(0);
}
.div1:hover .div12{
    display: block;
    /*color: #fff;*/
    font-size: 16px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.