jquery - jQuery使div在悬停时可见

这不是菜单，更像是一个选项卡，当我将鼠标悬停在选项卡上时，我使用jQuery来切换选项卡主体内容，我遇到的问题是，我似乎无法保持选项卡可见以单击链接标签内容主体。

到目前为止，我在这里所做的工作http://codepen.io/anon/pen/gvKqC

 $j("#callouts>li>a").hover(function(){
 $j('.callout-content').hide();
 $j(this).next('.callout-content').css('display','block');
 });

 $j('.callout-content').mouseleave(function () {
 $j('.callout-content').hide();
 });

我也试过了，这确实解决了问题，但是当鼠标从选项卡移动时，选项卡的内容不会消失。

最佳答案

尝试使菜单相对于嵌套它的li位置，然后使用jquery添加可通过CSS调用的类以显示菜单。这样，在菜单上方时，您将始终将li悬停。

这是您原始代码的工作叉：http://codepen.io/anon/pen/nJbyI