javascript - 鼠标悬停时不允许更改顶层的子图像

Question

遇到的问题似乎只是 IE 的问题，我不确定如何解决它。我知道很多人这样做，但我不确定如何让它在 IE 中正常工作。

我在一个电子商务网站上工作，当鼠标悬停在图片上时，我们希望产品的一些详细信息覆盖在产品图片的顶部。包含的 DIV 是 javascript 触发器，但如果您的鼠标在点击 div 之前点击图像，则不会执行 div 类更改。

http://jsfiddle.net/eQMzg/

如果你转到 jsfiddle，如果你从 div 的右侧或左侧开始悬停，它会完美运行。如果您从底部或顶部开始，图像扩展到的位置，它不会。

<div class="product">
                    <div class="product_activitylayer" align="right" onmouseout="this.className='';this.className='product_activitylayer'" onmouseover="this.className='';this.className='product_activitylayer_hover'">
            </div>

        <div class="product_containertop" align="center"> 
            <img src="images/demoimages/product.jpg" height="160"> 
        </div>
      </div>

.product {
width:244px;
height:221px;
display:block;
float:left;
margin:0px 3px 5px 0px;
border-top:solid;
border-top-color:#10B0E5;
border-top-width:6px;
}
.product_containertop {
height:160px;
width:244px;
background:#FFFFFF;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#C7EEFA;
margin-bottom:2px;
}

.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;

}
.product_activitylayer_hover {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:.5;
filter:alpha(opacity="50");


}

Answer 1

约翰，

这是 IE 中的一个已知错误。如果任何元素具有透明背景 - IE 不会在其上执行悬停。您可以通过将背景应用于 .product_activitylayer 并将其不透明度设置为 0 来修复它

看我更新了你的 fiddle 。 http://jsfiddle.net/NETJ4/1/

.product_activitylayer {
    height:160px;
    width:244px;
    position:absolute;
    z-index:999;
    background:#00CCFF;
    opacity:0;
    filter:alpha(opacity="0");
}

或者这里是使用 jQuery 的改进版本 http://jsfiddle.net/zzLr6/2/