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

Question

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

我有一个div，名为subcontainer，包含两个元素： 两个图标和一个链接。

基本上，我希望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

如果要使图像渐变，请使用以下CSS：

.icons{
    transition: all 0.5s; /*how long you want the fade to last*/
}

.icons:hover{
    opacity:0;
}

这是一个小提琴：http://jsfiddle.net/74wPn/

编辑：修改以适应提问者的评论需求。

.icons{
    transition: all 0.5s; /*how long you want the fade to last*/
}

.subcontainer:hover .icons{
    opacity:0
}

更新了小提琴：http://jsfiddle.net/74wPn/1/

Answer 2

使用psuedo选择器：

查看此处：http://jsfiddle.net/SinisterSystems/hajt6/3/

通过这种方式，您告诉它只定位img的子.subcontainer元素，同时也允许您定位整个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;
}

Answer 3

这样做：

.icons:hover {
  display: none;
}

Answer 4

如果您希望它立即消失：

.icons:hover {
    display: none;
}

如果您希望在规定的时间段内完成此操作：

.icons:hover {
    transition: 0.2s;
    opacity: 0;
}

Answer 5

您可以使用jquery。

$(".icons").hover(function(){
$(".icons").hide();
});