3

仲間のコーダーが、(少なくとも私にとっては) .addClass メソッドの奇妙な動作に遭遇しました。.addClass メソッドと、div の背景色を変更する .highlight クラスを使用して、マウスがその上に置かれたときにアイテム (div) を強調表示しようとしています。(理由により、css :hover メソッドの代わりに jQuery を使用しています。)

コードは機能します。.highlight クラスが div に追加されますが、色は変わりません。色は、div のデフォルト css クラスに background-color が定義されていない場合にのみ変更されます。つまり、div が、たとえば background-color: white; を含むクラスで定義されている場合です。.highlight クラスが追加されますが、色は変わりません。

これは正常ですか、それとも何か不足していますか? 今のところ、ハイライトを表示するために .css('background-color', ....) を使用していますが、.addClass メソッドが機能しない理由が気になります。

ありがとう。

4

5 に答える 5

11

元の CSS クラスが新しいクラスをオーバーライドしています。

これを防ぐ!importantには、ホバー ルールに追加するか、そのセレクターをより具体的にするか、CSS の元のクラスの後に移動します。

于 2011-02-01T16:25:10.457 に答える
2

問題は、元の背景色がどのように適用され、カスケードの優先度と特異性に関連しているかにあると思われます。元の背景色の CSS セレクターは、おそらくクラスよりも具体的であり、優先されます。たとえば、ID または DOM 内の位置によって要素を指定するセレクターは、単純なクラス指定子よりも具体的です。クラス宣言を作成する!importantか、元の CSS セレクターの特異性を減らす (可能であれば) の両方が機能するはずです。

于 2011-02-01T16:33:01.623 に答える
2

!importantCSS でフラグを設定してみてください。

.highlight {
  background-color: #ff0000 !important;
}
于 2011-02-01T16:25:26.227 に答える
1

試す

background-color:#f00 !important;
于 2011-02-01T16:25:05.253 に答える
1

2 つのクラスがあり、両方が背景色を指定している場合、どちらの色が使用されるかは、2 つのクラスのスタイルが定義されている場所によって異なります。

于 2011-02-01T16:25:46.647 に答える