jquery 悬停 div 并显示另一个 div 然后保持该 div 打开

Question

如果有人能帮助我，我将不胜感激。

我只想悬停一个 div 并显示另一个 div 然后我想悬停那个 div 但那个 div 仍然打开

代码片段:

$(function(){
	$('.navigation li').hover(
  	function(){
    	$('.navigation-dropdown').toggleClass('visible');
    }
    );
});

.navigation{
  color: #ffffff;
  background-color: #000000;
  height: 20px;
  width: 100%;
}
.navigation li{
  display: inline-block;
}
.navigation-dropdown{
  background-color:red;
  display: none;
}
.visible{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <a href=""><li>home</li></a>
    <a href=""><li>about</li></a>
    <a href=""><li>contact</li></a>
  </ul>
</div>
<div class="navigation-dropdown">
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>

https://jsfiddle.net/7okx2Lrx/7/

Answer 1

您需要对代码进行一些更改。其中一种变体是:

$(function(){
  $('.navigation li').hover(
    function(){
      $('.navigation-dropdown').addClass('visible');
    }
  );
  $('.navigation-dropdown').hover(function(){}, function(){
    $(this).removeClass('visible');
  }) 
});

https://jsfiddle.net/7okx2Lrx/11/