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

Question

У меня есть два изображения внутри 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

Answer 1

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

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

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

Answer 2

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

div:hover .img {
  opacity: 0.4;
}

div .img:hover {
  opacity: 1;
}

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

демо: http://jsbin.com/idowoz/2/

Answer 3

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

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

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

Answer 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;
}