html - テーブル内の TR で CSS ホバーを機能させることはできません

Question

マウスをテーブルの上に置いたときにテーブルの行を強調表示しようとしています

.Table .Popup tr:hover {
    background-color:red;
}

TDタグの検索は機能しているようですが、 TRタグの検索には問題があるようです:

フィドル：

私が間違っていることは何ですか？

score 5 · Accepted Answer

適切な CSS は次のようになります。

.Popup tr:hover td {
    background-color:red;
}

.Popup .PopupRow:hover td {
    background-color:red;
}

(確実に) a のスタイルを設定できないため、ホバー時<tr>に子にスタイルを適用する必要があります(したがって.<td>tr:hover td

さらに、.Tableクラスはフィドルの要素を参照していないため、問題が発生する可能性があります。

score 3 · Accepted Answer

あなたはただ行うことができます：

td:hover {
    background-color:red;
}

score 2 · Accepted Answer

前の質問で述べたように：

CSS セレクターは何も選択していません。

.Table .Popup tr:hover {
    background-color:red;
}

次のようにする必要があります。

.Popup tr:hover {
    background-color:red;
}

と

.Table .Popup .PopupRow:hover {
    background-color:red;
}

する必要があります

table tr.PopupRow:hover {
    background-color:red;
}

また

table .PopupRow:hover {
    background-color:red;
}

これらは両方とも同じ要素を選択するため、より具体的なセレクター(2 番目のセレクター) が実際に使用されることになります。

最初のセレクターは、現在ホバーされている要素と、のクラスを持つ任意の要素の子孫であり、クラスがの任意の要素の子孫である要素に一致し.Table .Popup tr:hoverます。trPopupTable

2 番目のセレクターは、現在ホバーされているのクラスを持つ要素と、のクラスを持つの任意の要素の子孫であるのクラスを持つ任意の要素の子孫で.Table .Popup .PopupRow:hoverある要素と一致します。PopupRowPopupTable

フィドルのマークアップはその構造を反映していないため、セレクターによって一致するものはありません (そのため、スタイルが反映されません)。

score 2 · Accepted Answer

このようにしてみてください

.PopupContainer .Popup tr:hover {
    background-color:red;
}

score 2 · Accepted Answer

CSS セレクターが間違っていました:

両方

table tr:hover {
    background-color:red;
}

と

table .PopupRow:hover {
    background-color:red;
}

ここで動作します。

非常に具体的にする必要がある場合は、次のセレクターを使用できます。

div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{

ただし、長いセレクターは時間がかかるため、より広いセレクターが適しています。本当に、ここだけ必要.PopupRow:hoverです。

score 2 · Accepted Answer

2

あなたはtdをする必要があります

tr:hover td {
     background-color:red;
}

于 2013-07-04T15:56:33.783 に答える

score 1 · Accepted Answer

1

.Popup tr:hover { background-color:red;

これは完全に機能します。

于 2013-07-04T16:40:03.783 に答える

7 に答える 7