一级菜单hover进入二级菜单，二级菜单不消失

最新推荐文章于 2025-05-19 12:03:11 发布

原创最新推荐文章于 2025-05-19 12:03:11 发布 · 1.1w 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

本文探讨了一级菜单hover显示二级菜单时的问题，并提供了多种解决方案，包括调整DOM结构、使用CSS选择器、设置定时器和鼠标定位等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写分级菜单时遇到问题：

设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失

根据一二级菜单DOM关系提出不同思路：

一级菜单包裹二级菜单

<a>
       一级菜单
        <ul>
                <li>二级菜单</li>  
        </ul>
</a>

此种情况可直接使用css:hover选择器效果即可

一二级菜单为兄弟关系

<a class="sctnav_list_Details"  href="javascript:">
                           一级菜单
 </a>

<div class=" carousel_Details">
     <ul class=" carousel_left_Details">

            <li>二级菜单</li>

      </ul>

</div>

思路：使用padding内边距属性，使一级菜单的内边距可以到达二级菜单的范围，同时设置如下css属性：

注：如果出现移出一级菜单时二级菜单消失,多是一级菜单与二级菜单之间存在间隙(包括两者边框)

 .sctnav_list_Details:hover ~ .carousel_Details,
 .sctnav_list_Details ~ .carousel_Details:hover {
    display: block;
}

两者DOM不存在关系时：

思路：

1)使用定时器，在移出一级菜单时创建定时器事件，延迟隐去二级菜单

在二级菜单中建立移入移出事件：hover(),移入时清除上一步骤的定时器，移出时清除定时器并隐去二级菜单，注：此处不适合建立单纯mouseover()事件，会导致直接从二级菜单移出而二级菜单不消失问题

2)使用鼠标定位，在移出一级菜单时判断鼠标是否进入二级菜单的范围

获取二级菜单DOM的坐标：

$("section
 .nav_float").offset().top ； /*获取当前元素距离document文档顶部距离*/

获取鼠标坐标

console.log(e.pageY);/*以当前文档为坐标定位Y轴距离*/

console.log(e.clientY);/*以当前页面窗口为坐标定位Y轴距离，不受滚动条影响*/

此处需注意采用的定位坐标是相对与文档还是可视窗口，鼠标定位与DOM定位选择需一致

另外还有定位坐标方法的浏览器兼容问题