时间戳

首页 > 解决方案 > Show submenu on different div on hover

javascript - Show submenu on different div on hover

问题描述

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.

标签： javascriptjqueryhtmlcss

解决方案

Use MouseLeave to exit the second menu

$(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>

推荐阅读