绝对定位元素上的 Mouseenter 事件

debugcn 发表于 Dev

大房子

我正在创建一个有几层深的菜单。我的意图是使用几个嵌套的 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查看和演示非常精简的代码

杰克·哈岑科

只需为不可见的 ul 添加 z-index: -1 ：

   .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}，它会有一些简单的动画。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。