Search code examples
javascriptcsslayeronmouseover

Child image not allowing top layer change onmouseover

Running into a problem that seems to ONLY be an issue with IE, and I'm not sure how to fix it. I know a lot of people do this but I'm not sure how to make it properly work with IE.

I'm working on an ecommerce site where we want some details of a product to overlay over the top of the product image when hovering over the image. The containing DIV is the javascript trigger, but if your mouse hits the image before it hits the div, the div class change doesn't execute.

http://jsfiddle.net/eQMzg/

If you go to the jsfiddle, if you start the hover from the right or left side of the div, it works perfectly. If you start it from the bottom or top, where the image is expanded to, it doesn't.

<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");


}
Solution

  • John,

    This one is a known bug in IE. If any element has transparent background - IE does not takes executes the hover on it. You can fix it by applying the background to .product_activitylayer and set it's opacity to 0

    See I updated your 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");
}

    Or here is a improved version using jQuery http://jsfiddle.net/zzLr6/2/