jquery保持div在悬停可见

Question

这不是菜单，更像是一个选项卡，我使用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(); 
}); 

我也试过这个，这不解决问题，但标签内容不离开鼠标时，从标签移动。

Answer 1

尝试具有相对于它嵌套内，则使用jquery添加类锂菜单位置您可以使用CSS调用以显示菜单。这样，当你在菜单本身上时，你总是会徘徊。

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

Answer 2

DEMO

尝试此

var $j = jQuery.noConflict(); 
$j("#callouts>li>a").hover(function(){ 

    $j('#callouts .callout-content').css('display','none'); 

    $j(this).next('#callouts .callout-content').css('display','block'); 
}); 


$j('.callout-content').mouseleave(function() { 
    $j('#callouts .callout-content').css('display','none'); 
}); 

而不是这样的：

 var $j = jQuery.noConflict(); 
$j("#callouts>li>a").hover(function(){ 
    $j(this).next('#callouts .callout-content').css('display','block'); 
}).mouseleave(function(){ 
    $j(this).next('#callouts .callout-content').css('display','none'); 
});