IE8下元素背景为透明时,hover事件失效的bug
发布在前端小菜鸡的填坑之路2015年11月25日view:901CSS前端开发前端的畅想
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在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

原文出处:http://www.foreverpx.cn 转载请注明出处。

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端小菜鸡的填坑之路

前端小菜鸡的填坑之路

我的收藏