JQuery懸停兩個div

Question

我有兩個HTML表格行，當我懸停第一個tr時，我想顯示這個和第二個tr，並且當鼠標將同時出現tr時，第二個tr必須是隱藏。

如何使用JQuery執行此操作？

<tr class="pr_td_main pr1"> 
    <td>123</td> 
    <td>15</td> 
</tr> 
<tr class="pr_td_desc pr1"> 
    <td colspan="3">description</td> 
    <td colspan="2">123<br />456</td> 
</tr> 

Answer 1

問題很混亂。你想_desc顯示，當你把鼠標放在_main上時？

如果是這樣的話，你可以這樣做：

$(".pr_td_main").mouseover(function(){ 
    $(this).next(".pr_td_desc").show(); 
}); 

，並隱藏它，當用戶移動他的鼠標了：

$(".pr_td_desc").mouseleave(function(){ 
    $(this).hide(); //hide this tr 

    }); 

Answer 2

我真的不建議做這種方式，但是：

var $firstTR = $('tr.pr_td_main'), 
    $secondTR = $('tr.pr_td_desc'); 

$firstTR.hide(); 

$secondTR.mouseenter(function(){ 
    $firstTR.fadeToggle(); 
}).mouseleave(function(){ 
    $firstTR.fadeOut(); 
});