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'); 
});