隐藏/显示某些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(); 
});