javascript - ie7 mouseleave时如何不隐藏子菜单?
巴扎黑
巴扎黑 2017-04-10 17:02:25
0
2
453

导航菜单包括子菜单,当鼠标移入需要显示子菜单,鼠标移出则隐藏子菜单,但是在ie7下只要鼠标移出父级p时子菜单就消失了,鼠标永远无法移入到子菜单。
HTML如下

<p class="parentp">
    <span>父菜单1</span>
    <p class="submenu">
        <ul>
            <a href=""><li>子菜单1</li></a>
            <a href=""><li>子菜单2</li></a>
            <a href=""><li>子菜单3</li></a>
        </ul>
    </p>
</p>
<p class="parentp">
    <span>父菜单2</span>
    <p class="submenu">
        <ul>
            <a href=""><li>子菜单1</li></a>
            <a href=""><li>子菜单2</li></a>
            <a href=""><li>子菜单3</li></a>
        </ul>
    </p>
</p>

jQuery如下

$('.parentp').mouseenter(function(){
        $(this).children('.submenu').show();
}).mouseleave(function(event){
        $(this).children('.submenu').hide();
});

这样写在ie8 chrome下都可以正常显示,ie7不行,请问要如何解决?

巴扎黑
巴扎黑

全部回复(2)
Peter_Zhu

我在ie7下面测试也是可以的啊。
但对于你说的“只要鼠标移出父级p时子菜单就消失了,鼠标永远无法移入到子菜单。”这个问题,可以用setTimeout函数,延迟子菜单hide,然后在mouseenter事件里clearTimeout

左手右手慢动作

有可能是因为定位的问题,你是否用了绝对定位,IE7有bug

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板