当顶部有图像时，CSS背景悬停动画不起作用答案

【问题标题】：CSS background hover animation doesn't work when there is an image on top当顶部有图像时，CSS背景悬停动画不起作用
【发布时间】：2012-12-21 19:26:52
【问题描述】：

当我需要将 div 设置为 60% 的不透明度并在悬停时将其动画设置为 90% 的不透明度时，问题就开始了。

唯一需要注意的是，我需要始终在此框顶部放置一个全白（非透明）PNG 图像。

所以我尝试了覆盖包含图像的单独 div 并使用边距将其放置到位的技巧；但是当您的鼠标位于图像顶部时，背景 div 动画悬停不起作用。

HTML

<div style="position:relative;top:-1px;left:0">
<div class="ontop"><img src="http://www.designdownloader.com/item/pngs/button01_google/button01_google-20110813210436-00005.png" alt="OneSpring - Play Video" /></div>
                <div id="box-video">


            </div>            
            </div>
</div>

CSS

#box-video {
    position: absolute;
    background-color:rgba(0,57,129,1);
    top: 0;
    left: 0;
    padding: 15px;
    font-family: 'Helvetica Neue Light', Arial, Helvetica, sans-serif;
    width: 210px;
    height: 130px;
    opacity: 0.6;
    filter: alpha(opacity=60);
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
}
#box-video:hover, .ontop:hover {
    cursor: pointer;
    /*color: #ffffff;*/
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
    zoom: 1;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

div.ontop {
    position: relative;
    top: 4.7em;
    left:30px;
    z-index:1002;
}

这是一个显示问题的 JSFiddle：

http://jsfiddle.net/xpancom/fZrWA/

如何让背景悬停在图像上方也能正常工作？

【问题讨论】：

标签： css background hover opacity

【解决方案1】：

我认为您在谈论 CSS pointer-events 属性。 pointer-events | MDN

所以您的代码可能如下所示：

div.ontop {
  position: relative;
  top: 4.7em;
  left:30px;
  z-index:1002;
  pointer-events: none;
}

http://jsfiddle.net/8CZEY/

【讨论】：

【解决方案2】：

您也可以使用 :before 或 :after 伪类。

它将大量清理您的代码。

这就是你的 HTML 的样子：

<div style="position:relative;top:-1px;left:0">
  <div id="box-video"></div>
</div>

这里是more on them，这里是小提琴：http://jsfiddle.net/jyHMf/

看看那是不是你要找的。p>

【讨论】：

感谢您的快速解决方案...我同意这是杀手，但我选择了 Guffa 的解决方案，因为它适用于 IE7。

【解决方案3】：

在容器上放一个id：

<div id="box" style="position:relative;top:-1px;left:0">

现在把hover事件放在容器上，让它影响子元素：

#box:hover {
  cursor: pointer;
}

#box:hover #box-video {
  opacity: 0.9;
  filter: alpha(opacity=90);
  zoom: 1;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

演示：http://jsfiddle.net/fZrWA/2/

【讨论】：