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

最新推荐文章于 2024-04-20 23:48:04 发布

Lin_Rock

最新推荐文章于 2024-04-20 23:48:04 发布

阅读量1.1w

点赞数 2

分类专栏：前端分级菜单文章标签：分级菜单隐藏问题鼠标定位 div位置定位

本文链接：https://blog.csdn.net/qq_34485818/article/details/72794272

版权

1 篇文章 0 订阅

订阅专栏

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

设置一级菜单：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定位选择需一致 

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

关注

专栏目录