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

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 更多specific比 .content_pic:hover 所以 opacity:0.4; 将始终覆盖 opacity:1.0;。

改用#picture img:hover。