0

遇到一个似乎只是 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");


}
4

1 回答 1

0

约翰，

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

看到我更新了你的小提琴。 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/的改进版本

于 2013-09-20T23:55:10.337 回答