jQuery鼠标悬停链接显示隐藏的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();

});