突出顯示錶在多個表中懸停

Question

我有三個表，所有並排允許溢出。

我需要鏈接所有三個表上的表格行，因此當它懸停在一張表上時，所有表格中都突出顯示了該行。

真的很感激任何幫助。

例子：

<table class="one" width="33.3%"> 
    <tr> 
    <td>Example</td> 
    </tr> 
</table> 
<table class="two" width="33.3%"> 
    <tr> 
    <td>Example</td> 
    </tr> 
</table> 
<table class="three" width="33.3%"> 
    <tr> 
    <td>Example</td> 
    </tr> 
</table> 

Answer 1

你可以使用jQuery的懸停方法與第n個孩子選擇組合。

$("#parentDiv table tr").hover(function(){ 
    // on enter 
    var childNum = $(this).index() + 1; 
    $('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "pink"); 
    }, function(){ 
    // on leave 
    var childNum = $(this).index() + 1; 
    $('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "white"); 
}); 

變化#parentDiv，無論你已爲表一個共同的父元素，你需要強調。

例如：https://jsfiddle.net/z7r8oc57/