悬停效果不会在图像上触发 [英] Hover effect won't trigger on image

问题描述

我在#picutre div 中将鼠标悬停在 img 上时遇到问题.HTML:

<img class="content_pic";src=图像/示例.jpg"；alt=示例"/><img class="content_pic";src=图像/示例.jpg"；alt=示例"/>

我的 CSS 看起来像这样:

#picture {文字对齐:居中；}#图片 img {宽度:40%；高度:40%；边框:1px 实心 #000000;显示:内联块；左边距:0;边距右:0;不透明度:0.4；}.content_pic:悬停{不透明度:1.0；}

所以我想知道为什么它不起作用.我正在使用谷歌浏览器，也检查了 IE10，但也没有在那里工作.

解决方案

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

改用#picture img:hover.

I have problem with my hover on img in my #picutre div. 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>

And my CSS looks like this:

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

So i'm wondering why it doesn't work. I'm using Google Chrome, checked IE10 too but not working there too.

解决方案

#picture img is more specific than .content_pic:hover so opacity:0.4; will always overwrite opacity:1.0;.

Use #picture img:hover instead.

这篇关于悬停效果不会在图像上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！