Question

我在#picutre div中将鼠标悬停在img上时出现问题。 HTML：

<div id="picture">
      <img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
      <img class="content_pic" src="image/exemple.jpg" alt="exemple"/>
</div>

我的CSS看起来像这样：

#picture {
text-align:center;
}

#picture img {
width:40%;
height:40%;
border:1px solid #000000;
display:inline-block;
margin-left:0;
margin-right:0;
opacity:0.4;
}

.content_pic:hover{
opacity:1.0;
}

所以我想知道为什么它不起作用。我正在使用谷歌浏览器，也检查了IE10，但也没有在那里工作。

Answer 1

#picture img比.content_pic:hover更specific，因此opacity:0.4;将始终覆盖opacity:1.0;。

改为使用#picture img:hover。

Answer 2

您已为opacity 0.4提供了图片img .content_pic:hover和悬停效果，因此此vl不起作用。

在这里看到小提琴 http://jsfiddle.net/4z55sjn0/2/

IMG悬停不起作用

2 个答案: