javascript - 悬停离开父级元素隐藏父级元素，悬停在子级元素却也隐藏了父级

问题描述

问 题

// html
<div class="sidebar-attach">
    <div id="secondary-nav">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        <ul/>
    </div>
</div>

 // js
 $('.sidebar-attach').on('mouseout',function(){
    $('.sidebar-attach').hide();
 });

原意是离开sidebar-attach的时候就隐藏它，现在鼠标悬停在其中的secondary-nav、ul、li、a的时候都会隐藏掉它，应该如何去修改？

解决方案

用 mouseleave 事件

http://www.w3school.com.cn/jquery/event_mouseleave.asp

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

这篇关于javascript - 悬停离开父级元素隐藏父级元素，悬停在子级元素却也隐藏了父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！