在悬停时选择以前的兄弟姐妹[重复]答案

【问题标题】：Select previous siblings on hover [duplicate]在悬停时选择以前的兄弟姐妹[重复]
【发布时间】：2012-12-22 04:48:26
【问题描述】：

我在一个 div 中有两个图像。当用户将鼠标悬停在第二张图片上时，第一张的不透明度应该达到 40%。我的问题是当img.second 被悬停时我无法选择img.first。我曾尝试查看通用同级选择器，但这似乎只选择了初始选择器之后的元素。

我知道这可以用 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

【问题讨论】：

哪个浏览器/浏览器版本？
“这似乎只选择了你的初始选择器之后的元素”这是正确的；你将不得不找到另一种解决方法。
@BoltClock 到 jQuery 我去。您可以将您的回复作为答案发布，以便我接受吗？

标签： html css css-selectors

【解决方案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;
}

演示：http://jsbin.com/idowoz/2/

【讨论】：

假设你很高兴调整你的 html 和 CSS，显而易见的事情就是重新排序 img 标签，因为 img:hover+img 是一个完全有效的 CSS 选择器。
很遗憾，我无法重新排序我的 HTML。
@icu222much 我不明白你为什么应该这样做，它也适用于你的 html。我只是使用 span 和 classes，因为我没有有效的图像源来测试。只需将 css 应用于您的标记，它就会起作用。
@podperson 我不明白你想说什么。
@yoshi，对不起，我的第一条评论是针对 podperson。

【解决方案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;
}

【讨论】：