html - 在悬停时选择以前的兄弟姐妹

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:hoverandimg: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;
}