悬停效果不会在图像上触发

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;
}

所以我想知道为什么它不起作用。我正在使用 Google Chrome，也检查了 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 无效。

请参阅此处的 fiddle http://jsfiddle.net/4z55sjn0/2/

悬停效果不会在图像上触发

Hover effect won't trigger on image

html

css

image

hover

opacity