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

我将鼠标悬停在 #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，但也无法在那里工作。

#picture img更多的是specific http://www.w3.org/TR/CSS21/cascade.html#specificity than .content_pic:hover so opacity:0.4;总会覆盖opacity:1.0;.

Use #picture img:hover反而。