javascript - jQuery ホバーで表のセルと行の背景色を変更する

Question

基本的に、テーブルの行にカーソルを合わせると、行の背景色が「黒」に変わり、特定のセルまたは td が「赤」に変わります。

つまり、ホバリング時に 2 つのイベントが発生します。私はどちらか一方に対してそれを行う方法を知っていますが、両方ではありません。

これはjqueryを使用して可能ですか？

皆さんの貢献に感謝します。皆さんに感謝します。

Answer 1

シンプルな CSS で十分です。

tr:hover{
 background-color:red
}

td:hover{
background-color:blue
}

http://jsfiddle.net/nRuXn/1/

Answer 2

$('td').hover( function() {
    $(this).parent().children().css("background-color", "black");
    $(this).css("background-color", "red")
});

$('tr').mouseleave( function() {
    $(this).children('td').css("background-color", "white");// or whatever
});

Answer 3

赤くしたい td にいくつかのクラスを追加し (そのクラスを 'rdClass' と呼びましょう)、行 'blkClass' を追加します。

<table>
<tr class='rdClass'>
 <td>
        1
 </td>
 <td class='blkClass'>
        2
 </td>
 <td>
        3
 </td>
</tr>
</table>

$(document).ready(function () 
{
    $(".rdClass").mouseover(function ()
    {
        $(this).css("background-color", "red");
    });

    $(".blkClass").mouseover(function ()
    {
        $(this).css("background-color", "black");
    });
});

Answer 4

クラスを追加および削除するすべての行と td にホバー リスナーを追加し、CSS を使用してそのクラスを行とセルで異なるスタイルにします。

ワーキングデモ

jQuery

$('tr, td').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

CSS

tr.highlight {
    background-color: red;
}

td.highlight {
    background-color: black;
}

Answer 5

$("td").hover(function(){
  $(this).css("background-color", "red");
  $(this).parrent('tr').css("background-color", "black");
});

Answer 6

行とセルの両方が同じコンテナー内にある場合、マウスオーバー イベントをそのコンテナーにアタッチし、ハンドラーで子を変更できます。