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

【问题标题】：Hover effect won't trigger on image悬停效果不会在图像上触发
【发布时间】：2015-04-02 12:46:47
【问题描述】：

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

【问题讨论】：

标签： html css image hover opacity

【解决方案1】：

#picture img 比.content_pic:hover 更多specific 所以opacity:0.4; 将始终覆盖opacity:1.0;。

请改用#picture img:hover。

【讨论】：

我发现了我的问题！我在#content 中有#picture div，而#content 有 z-index: -1;这导致了悬停问题。你关于 id 和 class 的规范也帮助了我！谢谢:)

【解决方案2】：

你已经给了图片 img opacity 0.4 和 .content_pic:hover 的悬停效果，所以这个 vl 不起作用。

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

【讨论】：

@Lea cohen，请通过我的代码，这是错误的。我认为它工作得很好。
我只是格式化了代码，并没有改变任何东西的意思。如果我不小心做了，我很抱歉。如果您觉得我的编辑有误，可以回滚到您的第一个版本。