Question

问题在于：我想使用透明div在图像上创建反应区域，但以下代码不适用于IE（在Chrome上测试）：div“hover_zone”的背景颜色不完全改变。

问题是由于背景颜色设置为透明。使用任何有效的颜色，如#FFF，它可以工作（似乎IE认为：它是透明的，它不包含任何东西，让我们不显示它。）

<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>

感谢您的帮助！

干杯！

Answer 1

我遇到了这个问题并用这种风格修复了它：

div#hover-zone { background:transparent url('../images/spacer.gif') 0 0 repeat; }

其中spacer.gif是1px透明gif。

希望这会有所帮助。

Answer 2

用户过滤即

   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 */

Answer 3

我遇到了同样的问题，我的解决方案是让元素具有“真实”的背景色，但不透明度为零。不幸的是，没有“好”的crossbrowser方法来实现这一点，但由于我碰巧需要元素在悬停时部分透明，这是一个事实上的非问题，所以这个解决方案运行良好为了我。它可能不适合你，但也许它会帮助别人，所以无论如何我都会发布它。

.hotspot
{
    background-color: #FFFFFF; /* will be visible upon hover */

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    -moz-opacity: 0; /* Netscape */
    -khtml-opacity: 0; /* Safari 1.x */

    opacity: 0;
}
.hotspot:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
    filter: alpha(opacity=70); /* IE 5-7 */
    -moz-opacity: 0.7; /* Netscape */
    -khtml-opacity: 0.7; /* Safari 1.x */

    opacity: 0.7;
}

Answer 4

将'img'放在'a'中并使用'span'作为'div'（内联中不允许使用blockelement）

<style type='text/css'>

#hover_zone{
    position:absolute;
    display:block;
    width:40px;
    height:40px;
    left:10px;
    top:10px;
}
a:hover #hover_zone{
    background-color:#0C0;
}

</style> 

<div id="container">

  <a href="#"><span id="hover_zone"></span><img src="http://revaxarts.com/portfoliodata/fotobox/screenshot.jpg" /></a>
</div>

IE问题：图片上方的透明div不会触发CSS：悬停

4 个答案: