IE问题：图片上方的透明div不会触发CSS：悬停 [英] IE Problem : Transparent div above a picture doesn't trigger the CSS:hover
问题描述
这是问题：我想使用透明div在图像上创建反应区域，但以下代码在IE上无效（在Chrome上测试）：divhover_zone的背景色不改变根本。
问题是由于背景颜色设置为透明。使用任何有效的颜色，如#FFF，它的工作原理（看起来像IE认为：它是透明的，它不包含任何东西，让我们不显示它）
< HTML>
< body>
< style type ='text / css'>
#hover_zone {
background-color：transparent;
可见性：可见;
位置：绝对;
width：40px;
height：40px;
left：10px;
top：10px;
z-index：1000;
}
a：hover #hover_zone {
background-color：＃0C0;
可见性：可见;
}
< / 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>
感谢您的帮助！
干杯！
我有这个确切的问题，并用这种风格修复它：
div＃hover-zone {background：transparent url（'../ images / spacer.gif'）0 0 repeat; }
其中spacer.gif是一个1像素的透明gif。
希望这有助于。
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!
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.
这篇关于IE问题：图片上方的透明div不会触发CSS：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
