javascript - 绝对定位元素上的 Mouseenter 事件

Question

我正在创建一个有几层深度的菜单。我的意图是使用多个嵌套的 UL 和 LI 元素来制作此结构。当我将鼠标悬停在其中一个 LI 元素上时，它会显示该菜单项的下一级导航。但是，当我尝试将鼠标移到该元素时，它会自动向我显示最终菜单项的子项。

<div class="menu">
    <ul>
        <li><a>First</a>
            <ul>
                <li><a>Child of First</a></li>
                <li><a>Child of First</a></li>
            </ul>
        </li>
        <li><a>Second</a>
            <ul>
                <li><a>Child of Second</a></li>
                <li><a>Child of Second</a></li>
            </ul>
        </li>
    </ul>
</div>

<style>
    .headerMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 50%;
        background: black;
        color: white;
    }

    .headerMenu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
    }

    .headerMenu ul ul.visibleSub {
        width: 100%;
        opacity: 1;
    }
</style>

<script>
    $(document).ready(function () {
        var $ul = $('.headerMenu ul');

        $ul.find('li').on({ 
            mouseenter: function() {
                $(this).find('ul').first().addClass('visibleSub');
            },
            mouseleave: function() {
                $(this).find('ul').first().removeClass('visibleSub');
            }
        });
    });
</script>

您可以在 https://codepen.io/pcasagrande/pen/RZqQwO 查看和演示非常精简的代码

Answer 1

只需添加 z-index: -1 表示不可见的 ul:

   .menu ul ul {
        position: absolute;
        top: 0;
        width: 0;
        left: 50%;
        opacity: 0;
        z-index: -1;
    }
    .menu ul li:hover > ul{
       opacity: 1;
       width: 100%;
       z-index: 1;
    }

此外，正如我上面提到的，您可以避免使用 jquery，而使用纯 css 来执行此操作。您还可以为 .menu ul ul{ transition: .2s} 添加一些过渡效果，它会有类似的简单动画。