search

Home  >  Q&A  >  body text

javascript - ie7 mouseleave时如何不隐藏子菜单?

导航菜单包括子菜单,当鼠标移入需要显示子菜单,鼠标移出则隐藏子菜单,但是在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不行,请问要如何解决?

巴扎黑巴扎黑2896 days ago445

reply all(2)I'll reply

  • 天蓬老师

    天蓬老师2017-04-10 17:04:25

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

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 17:04:25

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

    reply
    0
  • Cancelreply