css - 表の行にカーソルを合わせたときに含まれるリンクの背景色を変更する

Question

次の jquery コードを使用して、テーブルの行のスタイルを設定しています。

$('tr').hover(function() {  
    $('tr td').css('color', '#ffffff'); 
    $('tr td a').css('background', '#0080ff');  
});

$('tr').mouseleave(function() { 
    $('tr td').css('color', '#222222'); 
    $('tr td a').css('background', '#ffffff');
});

これは問題なく動作しますが、CSS の代替手段があるのではないかと考えています。それは私が今持っているものよりもはるかに効率的なアプローチのように思えますが、CSS についてはあまり知りません。

次の CSS を使用する際の問題

tr:hover {
    color:#ffffff;
}

表の行にカーソルを合わせても、アンカー タグは同じ色のままです。表の行にカーソルを合わせると、指定された表の行の内側にネストされたアンカー タグがトリガーされて色が変わる CSS を介した方法はありますか?

Answer 1

他の CSS セレクターに依存しますが、これはおそらく機能します。

tr:hover td {
    color: white;
}


tr:hover td a {
    background: #0080ff;
}

Answer 2

td:hover a {
    your link style on row hover
}