jQuery mouseover 链接显示隐藏的 div 不能完全悬停

Question

我正在尝试实现 div1 悬停时 div2 应该是可见的并且选项应该是可点击的。当 div1 被鼠标移出时，它不应该显示 div2

<div class="div1">Hover me</div>
<div class="div2">Clickable items</div>

.div1
{
  width:100px;
  height:30px;
  background:red;
}

.div2
{
  width:100px;
  background:blue;
  display:none;
  padding:10px;
}

$('.div1').hover(function()
{$('.div2').show()});
$('.div2').hover(function() 
  {}, function() {$('.div2').hide()}); 

此解决方案部分有效，在元素悬停后，当鼠标向下移动时，它可以正常工作。但是当鼠标向上移动时，它不会消失子菜单。

这是笔http://codepen.io/anon/pen/KwWGVq

Answer 1

你的 jQuery 错了，见下图：

$('.div1, .div2').hover(function(){

    $('.div2').show();

}, function(){

    $('.div2').hide();

});