我知道我的问题一开始可能看起来很奇怪,但让我解释一下......
我有一个名为 subcontainer 的 div,它包含两个元素: 两个图标和一个链接。
基本上,我希望 div 使两个图标在悬停时消失,但不是我的链接。这是我的代码:
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
<a href="http://twitter.com" target="_blank">Follow me</a>
<img class="icons" src="images/arrow_left.png"/>
</div>
**编辑:我希望图标在子容器上消失:悬停。不在图标上:悬停。
如果你有任何问题可以帮助我,尽管问! :)
最佳答案
使用伪选择器:
在这里查看:http://jsfiddle.net/SinisterSystems/hajt6/3/
通过这种方式,您告诉它只定位作为 .subcontainer
子元素的 img
元素,但也允许您定位整个 div
而不影响 a
元素。
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
<a href="http://twitter.com" target="_blank">Follow me</a>
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}
关于css - 在 div 中鼠标悬停时使图像淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21273900/