ホバー上の複数のテーブルのテーブル行をハイライト表示

Question

オーバーフローを許すために、すべて3つのテーブルが並んでいます。

リンクする3つのテーブルすべてにテーブルの行が必要です。そのため、すべてのテーブルで行が強調表示されている1つのテーブルに表示されます。

本当に助けていただければ幸いです。

例：

<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

あなたはn番目の子セレクタとの組み合わせでjQueryのホバーメソッドを使用することができます。

$("#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/