w3ctech

IE8下元素背景为透明时,hover事件失效的bug

在IE8下,当一个div设置了背景为透明或者不设置任何背景时,在该div上注册的hover事件是不会触发的。

<div class='outer'>
    <div class='inner'>
        此处有文字
    </div>
</div>
.outer{
    width:100px;
    height:100px;
}

.outer:hover{
    color:#000000;
}

上面这段代码中,给outer加上了hover的伪类,正常情况下,鼠标移到outer的100*100的区域中,就会触发hover,并使得内部的文字的颜色 变成黑色。但是在IE8下面,鼠标在除文字以往的区域都不回触发hover,只有在鼠标位于文字上时,才会触发。

针对于这个bug,有如下解决方案:

1.给outer设置真实的背景图片,不过是一张1*1的透明png。

.outer{
    background-image:url('1.png');
}

2.给outer设置一个不存在的图片,不过会产生404请求。

.outer{
    background-image:url('.');
}

更多的参考资料可看如下链接:

http://blog.rednael.com/2009/09/01/TrappingMouseEventsOnTransparentInputElementsOrTextareasInIE.aspx

w3ctech微信

扫码关注w3ctech微信公众号

共收到4条回复

  • 添加背景图片的话,会增加请求,不利于性能吧?还是很感谢分享!赞!

    回复此楼
  • IE8,let it go...

    回复此楼
  • @GreenMelon 对。。用背景图这种方法的缺点就是可能会影响性能。

    回复此楼
  • 我测试怎么不存在这个bug

    回复此楼