Menu
Here is the problem : I want to create reactive zones on a image using transparent div, but the following code doesn't work on IE (tested on Chrome) : the background-color of the div "hover_zone" doesn't change at all.
The problem is due to the background-color set to transparent. Use any valid color like #FFF and it works (it seems IE thinks like: it's transparent, it doesn't contain anything, let's not display it).
<html>
<body>
<style type='text/css'>
#hover_zone{
background-color:transparent;
visibility: visible;
position:absolute;
width:40px;
height:40px;
left:10px;
top:10px;
z-index:1000;
}
a:hover #hover_zone{
background-color:#0C0;
visibility: visible;
}
</style>
<div id="container">
<img src="http://ptaff.ca/blogue/wp-content/uploads/noir_black.png" />
<a href="#"><div id="hover_zone"></div></a>
</div>
</body>
</html>
Thanks for your help!
Cheers!
488
I had this exact problem and fixed it with this style:
div#hover-zone { background:transparent url('../images/spacer.gif') 0 0 repeat; }
where spacer.gif is a 1px transparent gif.
hope this helps.
112
user filter for ie
background-color: #ffffff; /* the background */
filter:alpha(opacity=50); /* Internet Explorer */
-moz-opacity:0.5; /* Mozilla 1.6 and below */
opacity: 0.5; /* newer browser and CSS-3 */
answered Apr 08 '26 21:04
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With