隱藏/顯示某些div根據鏈接相對懸停

Question

得到了一個簡單的問題，使用jquery，我如何創建一個菜單，左邊的鏈接和內容在右邊，例如，如果我懸停鏈接rel =「link1」時，應顯示id =「link1」右側的內容div，當我懸停另一個鏈接rel =「link2」時，會顯示id =「link2」的內容div，但如果我點擊鏈接之一，其內容的div應保持顯示，即使我將鼠標懸停另一個鏈接:)我希望我是在解釋清楚，這是我簡單的模板到實踐：

<div id="ref_menu"> 
    <a href="javascript://" class="ref_link" rel="link1"> 
     Link 1 
    </a> 
    <a href="javascript://" class="ref_link" rel="link2"> 
     Link 2 
    </a> 
</div> 
<div id="ref_content"> 
    <div class="ref_text" id="link1"> 
     text1 
    </div> 
    <div class="ref_text" id="link1"> 
     text2 
    </div> 
</div> 

CSS樣式：

#ref_menu { width:250px; text-align:right; position:absolute; left:0; } 
#ref_menu a { display:block; padding-right:10px; font-family:trebuchet ms; position:relative; font-style:italic; color:#0097c4; font-size:11pt; line-height:30px; letter-spacing:1px; border-bottom:1px solid #0097c4; } 
#ref_menu a:hover { color:red; border-bottom:1px solid red; } 
#ref_content { position:absolute; left:270px; } 
#ref_content div { display:none; position:absolute; top:0; } 

和biiiig感謝那些可以騰出一些時間幫助我的人，我真的很讚賞它！

Answer 1

類似的東西？：

http://jsfiddle.net/37urb/

$('a').hover(function(e){ 
    if($('.stayDisplayed').length == 0){ 
     var id = $(this).attr('rel'); 
     $('#'+id).show(); 
    } 
},function(e){ 
    if($('.stayDisplayed').length == 0){ 
     var id = $(this).attr('rel'); 
     $('#'+id).hide(); 
    } 
}); 

$('a').click(function(e){ 
    var id = $(this).attr('rel'); 

    $('.ref_text').removeClass('stayDisplayed'); 
    $('.ref_text').hide(); 
    $('#'+id).addClass('stayDisplayed'); 
    $('#'+id).show(); 
});