Question

我真的需要帮助。我试过但它仍然无法正常工作。我想制作一个下拉菜单，该菜单将在悬停时显示，并在离开该下拉菜单时消失。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

所以，当我移动鼠标离开导航菜单类时，我只想让灰色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，则隐藏下拉菜单。

希望这会有所帮助。

如何使下拉列表在悬停时保持打开状态并在离开时消失

1 个答案: