标签 html css css-selectors
<分区>
我在一个 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
最佳答案
I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.
没错。因此，使用纯 CSS 选择器这是不可能的。
但是，根据您的布局，您可以对选择器使用多个规则，例如 div:hover 和 img:hover 并使用不透明度值来获得在你想要的地方；有关示例，请参见其他答案。但如果您想要一个更简单的解决方案，您最好使用 jQuery。
关于html - 在悬停时选择 previous sibling 姐妹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13994633/
相关文章：
python - http客户端需要访问nginx两次才能加载css文件
html - 如何在相同背景图像大小的 HTML 中制作两个不同的 div？
css - 来自兄弟父 div 的子选择器使用 css 实现悬停效果
javascript - 是否有现有或即将推出的 CSS3 选择器来匹配属性名称的子字符串？
python - Python + Selenium-如何检查使用CSS样式并显示为内容的图像？
html - CSS 2 Floating Div Inside Container 全高带/图像
c# - JQuery UI sortable() 方法不支持错误