CODEWITHSUNDEEP
htmlinternet-explorer
Steve
Steve

Reputation: 4898

IE doesn't recognize box with transparent background over an image

I have a jsfiddle here - http://jsfiddle.net/wERsY/ - where a box with a transparent background is placed half over an image in the upper left corner of the image. The image and the box are absolutely positioned and the box is given a higher z-index than the image.

With FF, Safari, and Chrome, the entire box is seen when you hover over it (cursor turns to a pointer when you're over any part of the box) and clicking the box triggers the click handler, which turns the box red.

But with IE (I'm running IE10) only the part of the box that is not over the image is seen. If you hover over the part of the box that is over the image, the cursor doesn't change to a pointer and clicking does nothing.

If you give the box a color background, (uncomment line 4 of the CSS) then IE sees the entire box, including the part over the image.

Does anyone understand what's going on here and how I can get a transparent box to be clickable over an image with IE?

Thanks

HTML
<img id='pelican' src='http://s20.postimg.org/fpitivjl9/Pelican.jpg' alt="pelican"/>
<div id='clickBox'> </div>

CSS
div#clickBox {
    width:100px;
    height:100px;
/*    background-color:yellow; */
    cursor:pointer; 
    position:absolute;
    top:0px;
    left:0px;
    z-index=51; 
}
img#pelican {
    position:absolute;
    top:50px;
    z-index=50; 
}

jQuery
 $('#clickBox').click(function() {
        $(this).css({backgroundColor:'red'});
    })

Upvotes: 0

Views: 89

Answers (1)

Teemu
Teemu

Reputation: 23396

transparent in IE is really transparent, you can't see it, mouse can't see it, if there's underlying visible element.

Use a color for background and opacity: 0, and change opacity instead of background-color. A live demo at jsFiddle.

Upvotes: 1

Related Questions