Javascript 子图像不允许在MouseOver上更改顶层

遇到一个似乎只是IE问题的问题，我不知道如何解决它。我知道很多人都这样做，但我不知道如何使它与IE正常工作

我在一个电子商务网站上工作，我们希望在产品图片上方悬停时，可以覆盖产品的一些细节。包含的DIV是javascript触发器，但是如果鼠标在命中DIV之前命中图像，则不会执行DIV类更改

如果您转到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");


}

.产品{
宽度：244px；
身高：221px；
显示：块；
浮动：左；
保证金：0px 3px 5px 0px；
边框顶部：实心；
边框顶部颜色：#10B0E5；
边框顶部宽度：6px；
}
.product_容器顶部{
高度：160px；
宽度：244px；
背景：#FFFFFF；
边框底部：实心；
边框底宽：1px；
边框底色：#C7EEFA；
边缘底部：2px；
}
.product\u activitylayer{
高度：160px；
宽度：244px；
位置：绝对位置；
z指数：999；
}
.product\u activitylayer\u悬停{
高度：160px；
宽度：244px；
位置：绝对位置；
z指数：999；
背景：#00CCFF；
不透明度：.5；
过滤器：α（不透明度=“50”）；
}

约翰

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

看，我更新了你的小提琴。

或者这里有一个使用jQuery的改进版本

---

Hi@shekhardesigner，感谢您的回复！您所做的工作是有效的（实际上，除了jQuery one，它似乎不起作用），但将不透明度设置为零的要求是我必须解决的问题，因为我在activitylayer中有需要查看的对象。为了方便，我把它们拿走了。举个例子：……继续@shekharddesigner，所以我最初认为，如果我只发布一个触发层，一个位于触发层顶部的层来保存这些不同的图标，我们会很好，但是在触发层顶部放置一个层也会使其无法触发，所以我回到了原点。有什么想法吗？IE的关键问题是，你必须为它设置背景色，让它认为那里有一个真实的图层。然后，正如您所做的那样，您必须将不透明度设置为0，这给了我合适的效果，因为我在层中有对象。使用spacer.gif（像素的透明图像作为背景，并将其更改为悬停状态：））更新：层中的不透明度不能设置为0，我在层中有需要查看的对象（我刚开始删除它们是为了便于解释，因为我认为这些对象与解决方案无关

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