ie7元素position设为absolute其子元素mouseover，mouseout等鼠标事件失效

IE7鼠标事件问题及解决

最新推荐文章于 2023-09-10 16:49:03 发布

原创最新推荐文章于 2023-09-10 16:49:03 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #HTML #Blog #ViewUI

本文探讨了在IE7浏览器中使用mouseover等鼠标事件时遇到的问题，特别是当HTML元素的position属性设置为absolute时，鼠标经过空白区域事件可能失效的情况。文章提供了两种解决方案，并附带示例代码。

在作鼠标经过时的一些特效（combox，suggest，menutffu）时，使用用mouseover，mouseout，mousermove事件时。如果某个html元素的position值为absolute时，ie7下，如果鼠标经过其子元素的空白处，上述事件将无效；如果经过文字时，事件触发正常。但ie6下都正常。
注：无论事件如何定义结果一样（html标签，dom的属性，attachEvent）
解决办法：
一：为该元素设置background属性，值不能为transparent。
二：设置该元素的子元素的background属性，值不能为transparent。
如： <style type="text/css">
    #main{
        background-color:white;/*这个很重要,没有这个定义，IE7下不正常*/
        position:absolute;
        width:200px;
    }
    #main .hover{
        background:blue;
        color:white;

    }
</style>
<div id="main">
    <div>sddffd</div>
    <div >sddffd</div>
    <div>sddffd</div>
    <div>sddffd</div>
    <div>sddffd</div>
    <div>sddffd</div>
</div>
<script type="text/javascript">

</script>