Выбрать предыдущих братьев и сестер

У меня есть два изображения внутри div. Когда пользователь наводится над вторым изображением, первая непрозрачность должна идти до 40%. Проблема я в том, что я не могу выбрать img.first, когда img.second зависнет. Я попытался взглянуть на общий селектор, но кажется, что только выбирает элементы, которые появляются после вашего начального селектора.

Я знаю, что это можно сделать с помощью jQuery, но мне интересно, есть ли чистое решение CSS?

<div>
  <img class="first" src="#">
  <img class="second" src="#">
</div>

div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed

Ответы

Ответ 1

Я попытался взглянуть на общий селектор, но кажется, что он только выбирает элементы, которые появляются после вашего начального селектора.

Это правильно. Таким образом, с помощью чистого селектора CSS это невозможно.

Однако, в зависимости от вашего макета, вы можете использовать несколько правил с селекторами, такими как div:hover и img:hover, и играть со значениями непрозрачности, чтобы получить то, что вы хотите; см. другие ответы для примеров. Но если вы хотите более надежное решение, вам будет лучше с jQuery.

Ответ 2

попробуйте что-то вроде:

div:hover .img {
  opacity: 0.4;
}

div .img:hover {
  opacity: 1;
}

.img {
  display: inline-block;
  background: green;
  width: 100px;
  height: 40px;
}

demo: http://jsbin.com/idowoz/2/

Ответ 3

Попробуйте этот css:

div:hover img{
    opacity:0.5            
}
div:hover img:hover{
     opacity:1           
}

Тест: http://jsfiddle.net/WpCtL/2/

Ответ 4

Вы можете сделать трюк, чтобы все выглядело так: http://jsfiddle.net/cwxCX/3/

<div>    
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/300/300">
    <img src="http://placekitten.com/400/400">
    <img src="http://placekitten.com/500/500">
</div>

CSS

div{
    float:left;
}
img{
    width:100px;
    height:100px;
}
div img{
    float:right;
}

div img:hover ~ img{
    opacity:.4;
}