显示/隐藏非父子元素时，悬停不起作用

Hover won't work when show/hide non-parent&child element

本文关键字：悬停 不起作用 元素 父子 隐藏 显示      更新时间：2023-09-26

我有这样的代码

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
<ul>

但是我希望"mainlink2"有一个子菜单，我不想像孩子一样放置它，因为当我将子菜单设置为"绝对"时，我无法使其宽度适合屏幕并成为中心，所以我在"ul"之外创建了一个div像这样......

 <div>
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

当我调用JavaScript.hover时，我看不到子菜单。 我尝试通过记住主菜单的索引将一个类添加到"子菜单"中，当它匹配时，我添加类以显示子菜单，当不悬停时，我删除类。但是当我从主菜单中离开鼠标时，悬停功能无法做到这一点，子菜单是隐藏的。

试试这个：

.HTML： 

<ul id="mainmenu">
 <li><a href="#">mainlink1</a></li>
 <li class="mainlink2"><a href="#">mainlink2</a></li>
 <li><a href="#">mainlink3</a></li>
</ul>
<div class="submenu" style="position:absolute;background:#ddd; margin-left:-250px;left:50%;display:none;width:500px">
  <ul id="submenu">
   <li>sub1</li>
   <li>sub2</li>
   <li>sub3</li>
  </ul>
 </div>

JQUERY：

$(function(){
    $('.mainlink2').mouseenter(function(){
        $('.submenu').show(500);
    }).mouseleave(function(){
        $('.submenu').hide(500);
    });
});
相关文章：