css - 在 div 中鼠标悬停时使图像淡出

Question

我知道我的问题一开始可能看起来很奇怪，但让我解释一下......

我有一个名为 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>

**编辑:我希望图标在子容器上消失:悬停。不在图标上:悬停。

如果你有任何问题可以帮助我，尽管问! :)

Answer 1

使用伪选择器:

在这里查看: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;
}