ユーザーが行にカーソルを合わせたときに行の背景色を変更することで、単純なテーブル行のホバー効果を実現しようとしています。これは非常に簡単です。
tr:hover {
background: red;
}
ただし、クロムのバグに気づきました。列のセル間に小さなスペースがあり、マウスがまだ列にあるにもかかわらず、セルの上を移動する:hoverと<tr>スタイルがオン/オフになります。
試しましたがborder-collapse: collapse、セル間cellspacing="0"のホバーが失われる理由がわかりませ<tr>ん。セルの上下ではなく、セルのいずれかの側でのみ発生します。Firefoxでは期待どおりに動作します。
これがJSFiddleです。Chromeで、マウスを「最初の」から「2番目の」にゆっくりと動かしてみてください<tr>。ホバーの背景が失われる非常に薄いポイントがそれらの間にあることがわかります。
私はこれをChromiumのバグとしてここに報告しました。