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

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

4 个答案: