绝对定位元素上的 Mouseenter 事件

大房子

我正在创建一个有几层深的菜单。我的意图是使用几个嵌套的 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如果使用CSS3转换/变换来更改元素位置,则不会触发Mouseenter / Mouseover事件

来自分类Dev

了解绝对定位元素的默认位置

来自分类Dev

关于背景svg元素的mouseenter事件

来自分类Dev

触发Mouseenter事件

来自分类Dev

使用FillLayout在Composite上记录SWT MouseEnter / Exit事件

来自分类Dev

mouseenter mouseleave事件有冲突吗?jQuery的

来自分类Dev

拖动html元素时检测mouseenter事件

来自分类Dev

如何使用本机JS为动态添加的元素添加mouseenter事件

来自分类Dev

绝对定位元素激活滚动

来自分类Dev

当光标隐藏在其他HTML元素后面时,如何触发mouseenter事件?

来自分类Dev

MouseEnter和MouseLeave事件似乎很慢

来自分类Dev

绝对定位元素的宽度

来自分类Dev

哪个UserControl调用事件MouseEnter?

来自分类Dev

UserControl的标签隐藏了MouseEnter事件

来自分类Dev

多个按钮的MouseEnter事件上的Visual Studio更改面板BackColor

来自分类Dev

未在Chrome中禁用元素上引发Mouseenter事件

来自分类Dev

当光标隐藏在其他HTML元素后面时,如何触发mouseenter事件?

来自分类Dev

鼠标事件从绝对定位的元素冒泡

来自分类Dev

jQuery / CSS:如何在mouseenter事件上延迟1秒应用addClass。

来自分类Dev

触发Mouseenter事件

来自分类Dev

RichTextBox的MouseEnter事件处理程序

来自分类Dev

如何避免在jquery中的mouseenter事件上闪烁?

来自分类Dev

Mouseover / Mouseenter事件超出元素范围

来自分类Dev

jQuery mouseenter事件未执行

来自分类Dev

AngularJS-如何仅在cilck事件上不触发移动设备上的悬停动作(ng-mouseenter)

来自分类Dev

从子元素输入父项时,不会触发MouseEnter事件

来自分类Dev

为什么绝对定位元素显示在静态元素上?

来自分类Dev

将 mouseenter 事件更改为定时事件

来自分类Dev

绝对定位元素上不需要的边距

Related 相关文章

  1. 1

    如果使用CSS3转换/变换来更改元素位置,则不会触发Mouseenter / Mouseover事件

  2. 2

    了解绝对定位元素的默认位置

  3. 3

    关于背景svg元素的mouseenter事件

  4. 4

    触发Mouseenter事件

  5. 5

    使用FillLayout在Composite上记录SWT MouseEnter / Exit事件

  6. 6

    mouseenter mouseleave事件有冲突吗?jQuery的

  7. 7

    拖动html元素时检测mouseenter事件

  8. 8

    如何使用本机JS为动态添加的元素添加mouseenter事件

  9. 9

    绝对定位元素激活滚动

  10. 10

    当光标隐藏在其他HTML元素后面时,如何触发mouseenter事件?

  11. 11

    MouseEnter和MouseLeave事件似乎很慢

  12. 12

    绝对定位元素的宽度

  13. 13

    哪个UserControl调用事件MouseEnter?

  14. 14

    UserControl的标签隐藏了MouseEnter事件

  15. 15

    多个按钮的MouseEnter事件上的Visual Studio更改面板BackColor

  16. 16

    未在Chrome中禁用元素上引发Mouseenter事件

  17. 17

    当光标隐藏在其他HTML元素后面时,如何触发mouseenter事件?

  18. 18

    鼠标事件从绝对定位的元素冒泡

  19. 19

    jQuery / CSS:如何在mouseenter事件上延迟1秒应用addClass。

  20. 20

    触发Mouseenter事件

  21. 21

    RichTextBox的MouseEnter事件处理程序

  22. 22

    如何避免在jquery中的mouseenter事件上闪烁?

  23. 23

    Mouseover / Mouseenter事件超出元素范围

  24. 24

    jQuery mouseenter事件未执行

  25. 25

    AngularJS-如何仅在cilck事件上不触发移动设备上的悬停动作(ng-mouseenter)

  26. 26

    从子元素输入父项时,不会触发MouseEnter事件

  27. 27

    为什么绝对定位元素显示在静态元素上?

  28. 28

    将 mouseenter 事件更改为定时事件

  29. 29

    绝对定位元素上不需要的边距

热门标签

归档