鼠标移出后保持子菜单处于活动状态

Posted 2023-03-06

【中文标题】鼠标移出后保持子菜单处于活动状态

【英文标题】：Keep sub-menu active after mouseout

【发布时间】：2014-06-04 13:07:43

【问题描述】：

当用户将鼠标悬停在我的水平菜单上时，如何在另一个菜单项悬停之前保持子菜单打开？以下是源代码：

html

 <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="#">my Links</a>
     <ul>
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
 </ul>    

CSS

#nav 
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;

#nav li 
    float:left;
    list-style:none;
    display:inline

#nav a 
    text-decoration:none;

#nav li ul li a 
    margin:0

#nav .active a, #nav li:hover>a 
    background:#ac2024;
    color:#fff;

#nav li a:hover, #nav ul a:hover 
    background:#ac2024;
    color:#fff

#nav ul 
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;

#nav li:hover>ul 
    display: inline;

#nav ul a 
    width:100%

#nav:after 
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0

#nav 
    display:inline-block

如果这在 CSS 中是不可能的，那么如何用 jQuery 来完成呢？谢谢。

【问题讨论】：

这听起来像是你必须用一点 JS 来做的事情。话虽如此，如果将 display: block !important 应用于 a:hover 元素会发生什么？

所以你想删除显示的第一组翻转链接，然后显示第二组？或者您希望在翻转父菜单时显示所有子菜单？您最好发布最终的导航 HTML 和您想要实现的目标的描述。而不是我们试图通过移动目标帖子进行编码

不，我不想让所有子菜单都可见，我希望当悬停在第一组翻转链接上时，它们会显示出来，当悬停在第二组时，第一组应该隐藏，第二组保持活跃。

如果有人再次翻过第一个菜单，您希望发生什么？禁用第二个子元素并再次显示第一个？如果是这种情况，我已经更新了下面的答案

【参考方案1】：

我认为你不能仅使用 CSS 来实现。

我想到的解决方案是通过 jQuery 将类“hover-class”添加到 li 项，并在将鼠标悬停在新菜单项上时将“hover-class”添加到新项并删除它来自旧的。您应该在 JS 中跟踪最后一个被悬停的项目是什么，并根据这些数据操作视图。

但也许有人会让我大吃一惊，只在 CSS 中给出解决方案 :) 希望它有所帮助。

【参考方案2】：

根据您更新的问题，修改答案如下。

你需要添加我评论中提到的少量JS，请看这里的演示

JSFiddle (updated)

更新的 HTML：

  <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a id="hover1" href="#">my Links</a>
     <ul id="visible1">
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
   <li><a id="hover2" href="#">Our Links</a>
     <ul id="visible2">
       <li><a href="Link1">Link 3</a></li>
       <li><a href="Link2">Link 4</a></li>
     </ul>
   </li>
 </ul>

更新的 CSS：

    #nav 
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;

#nav li 
    float:left;
    list-style:none;
    display:inline

#nav a 
    text-decoration:none;

#nav li ul li a 
    margin:0

#nav .active a, #nav li:hover>a 
    background:#ac2024;
    color:#fff;

#nav li a:hover, #nav ul a:hover 
    background:#ac2024;
    color:#fff

#nav ul 
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;

#nav li:hover>ul 
    display: inline;

#nav ul a 
    width:100%

#nav:after 
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0

#nav 
    display:inline-block

.result_hover 
    display:block !important;

更新的 JQuery：

$("#hover1").hover(
  function () 
      $("#visible1").addClass("result_hover");
      $("#visible2").removeClass("result_hover");
  
);

$("#hover2").hover(
  function () 
      $("#visible2").addClass("result_hover");
      $("#visible1").removeClass("result_hover");
  
);

【讨论】：

这不起作用

所以你想删除显示的第一组翻转链接，然后显示第二组？或者您是否希望在滚动父菜单时显示所有子菜单？

谢谢Pete，这确实是我想要的，但是在添加 visible3、visible4 等更多部分时会出现问题，你可以看到更新的 jsfiddle。就像用户首先将鼠标悬停在 visible3 链接上然后转到 visible1 或 visible2 一样，所有链接都会网格化。是否有任何短代码可以做到这一点

您的 JS 中缺少 removeClass 元素，您需要为每个新菜单添加这些元素。在此处查看更新的 JSFiddle jsfiddle.net/MzZ4p/13

谢谢Pete，但这不适用于移动设备，在移动设备上，子菜单无法激活，这仅适用于桌面。你有什么解决办法吗？请帮忙..