javascript - 如何使下拉菜单在悬停时保持打开并在离开时消失

Question

我真的需要帮助。我试过了，但还是不行。我想制作一个下拉菜单，该菜单将在悬停时出现，并在离开该下拉菜单时消失。

$(document).ready(function(){
	$('.navigation-menu').mouseenter(function(){
  	$('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
  	$('.navigation-dropdown').removeClass('visible');
  });
});

ul{
  margin: 0;
}
.container{
  background-color: rgb(0,0,0);
  height: 30px;
  padding: 10px;
}
.container-dropdown{
  background-color: rgb(125,125,125)
}
.dropdown-menu{
  display: inline-block;
}
.navigation-dropdown{
  display: none;
}
.navigation-menu{
  display: inline-block;
  height: 100%;
}
.visible{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header"> 
  <div class="container">
    <img src="" alt="">
    <div class="navigation">
      <ul>
        <li class="navigation-menu"><a href="">home</a></li>
        <li class="navigation-menu"><a href="">home</a></li>
        <li class="navigation-menu"><a href="">home</a></li>
      </ul>
    </div>
  </div>
  <div class="navigation-dropdown">
    <div class="container-dropdown">
      <ul>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
        <li class="dropdown-menu">
          <img src="http://placehold.it/50x50" alt="">
        </li>
      </ul>
    </div>
  </div>
</header>

所以，我只是想让那个灰色的 div 在我移动鼠标离开导航菜单类时消失

我的问题:我必须先将鼠标移到灰色 div 上才能使灰色 div 消失。我想要的只是让灰色 div 可以消失，而不必先将鼠标移动到灰色 div

Answer 1

有很多更好的设计选项供您期待，以获得您想要的。但如果您只想坚持当前的布局和设计，我会进行一些更改以获得您想要的内容。

.container{
  background-color: rgb(0,0,0);
  height: 20px;
  padding: 10px;
  padding-bottom: 0px; --to remove any space between menu title and the dropdown
}

和

$(document).ready(function(){
    $('.navigation-menu').mouseenter(function(){
    $('.navigation-dropdown').addClass('visible');
  });
  $('.navigation-dropdown').mouseleave(function(){
    $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-dropdown').mouseenter(function(){
      $('.navigation-dropdown').addClass('visible');
  });

  $('.navigation').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });

  $('.navigation-menu').mouseleave(function(){
        $('.navigation-dropdown').removeClass('visible');
  });
});

如果鼠标离开 navigation div，则隐藏下拉菜单。

希望对您有所帮助。