在悬停时显示不同div上的子菜单 | 在悬停时显示不同div上的子菜单

本文介绍了在悬停时显示不同div上的子菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，请参阅以下html

Hi please see the following html

$(document).ready(function(){
  $(".sub").on({
     mouseenter: function (event) {
     $(".second.menu").addClass("show");
  }
  });
  $(".no-sub").on({
     mouseenter: function (event) {
     $(".second.menu").removeClass("show");
  }
  });
});

.second.menu {
  display:none;
  margin-top:5px;
}
.show {
  display:block !important;
  width:100% !important;
  overflow:hidden;
  background:wheat;
  padding:5px;
}
.nav li {
  float: left;
  min-width: 80px;
  border: 1px solid red;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
  <ul class="nav">
    <li class="no-sub">Home</li>
    <li class="sub color" >Color List</li>
    <li class="no-sub">Type List</li>
    <li class="no-sub">Type</li>
  </ul>
</div>
<div class="second menu">
  <ul class="nav" id="color">
      <li>Green</li>
      <li>Blue</li>
      <li>Red</li>
  </ul>
</div>
</html>

这里一切正常.但是问题在于，当有人将鼠标悬停在颜色菜单上时，它将显示子菜单.但是，如果他们将鼠标悬停并转到页面的任何部分，则子菜单不会隐藏.我怎样才能做到这一点?请帮助以简单的方式获得解决方案.

Here everything is working fine. But the problem is that when some one hover the color menu it is showing the submenu. But if they hover and go to any part of the page, submenu is not hiding. How can I do this? Please help to get the solution on simple way.

推荐答案

使用 MouseLeave 退出第二个菜单

$(document).ready(function(){
  $(".sub").on({
     mouseenter: function (event) {
     $(".second.menu").addClass("show");
  }
  });
  $(".second.menu").on({
     mouseleave: function (event) {
     $(".second.menu").removeClass("show");
     }
  });
  $(".no-sub").on({
     mouseenter: function (event) {
     $(".second.menu").removeClass("show");
  }
  });
});

.second.menu {
  display:none;
  margin-top:5px;
}
.show {
  display:block !important;
  width:100% !important;
  overflow:hidden;
  background:wheat;
  padding:5px;
}
.nav li {
  float: left;
  min-width: 80px;
  border: 1px solid red;
  margin-right: 1px;
  overflow: hidden;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu first">
  <ul class="nav">
    <li class="no-sub">Home</li>
    <li class="sub color" >Color List</li>
    <li class="no-sub">Type List</li>
    <li class="no-sub">Type</li>
  </ul>
</div>
<div class="second menu">
  <ul class="nav" id="color">
      <li>Green</li>
      <li>Blue</li>
      <li>Red</li>
  </ul>
</div>
</html>

这篇关于在悬停时显示不同div上的子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！