【问题标题】: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,请通过我的代码,这是错误的。我认为它工作得很好。
    • 我只是格式化了代码,并没有改变任何东西的意思。如果我不小心做了,我很抱歉。如果您觉得我的编辑有误,可以回滚到您的第一个版本。
    猜你喜欢
    • 2013-04-26
    • 2011-07-15
    • 1970-01-01
    • 2020-05-04
    • 1970-01-01
    • 2014-05-25
    • 1970-01-01
    • 1970-01-01
    • 2021-03-13
    相关资源
    最近更新 更多