Javascript jQuery mouseover链接显示隐藏的div在悬停时不工作

我试图实现当一个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()}); 

此解决方案部分工作，在元素悬停后，当鼠标向下移动时，工作正常。但当鼠标向上移动时，它不会显示子菜单

---

这是笔

您的jQuery错误，请参见以下内容：

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

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

}, function(){

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

});

---

因为您从未将鼠标滑过sub menuI尝试过此操作，但在显示div2内容时我仍然无法单击它。我尝试过此操作，但在显示div2时我无法单击它。您离开div1，因此如果sub和标题之间有任何分隔，它将隐藏。