3

ホバー時に要素にクラスを追加するスクリプトがあります。

問題は、新しく追加されたクラスが既存のcssを「上書き」していないようです（私のスタイルシートでは、追加されたクラスが既存のcssの下にリストされていますが）。

要素の実際の初期クラススタイルがないため、要素でremoveClassを使用できません。

上書きする必要がある「初期」スタイルは次のとおりです。

#menu ul li ul li {
background-color: #ccc;
}

追加する必要のあるクラスは次のとおりです。

.whitebg {
background-color: #fff;
}

私のスクリプトは次のとおりです。

$('#menu ul li ul li').hover(
function() {
    $(this).addClass('whitebg');
},
function () {
    $(this).removeClass('whitebg');
  }
);

誰かが私がこれを修正できる方法を知っていますか？

ありがとう！

4

4 に答える 4

4

idセレクターはセレクターよりも優先されclassます。あなたが必要です!important

.whitebg {
background-color: #fff !important;
}
于 2013-01-11T01:02:36.637 に答える
2

これは特異性のためです。!important提案されている他の投稿と同じように使用できますが!important、CSSで使用することはお勧めできません。

Use that as you last option.

代わりに2つのクラスを使用してください。

最も内側のliにdefaultクラスがあることを確認してください。

$('#menu ul li ul li').addClass('default').hover(
   function() {
      $(this).addClass('whitebg').removeClass('default');
   },
   function () {
      $(this).removeClass('whitebg').addClass('default');
   }
);

フィドルをチェック

于 2013-01-11T01:04:36.063 に答える
0

.whitebgクラスのbackground-colorに！importantタグを追加するだけです。それはあなたの問題を解決するはずです。

于 2013-01-11T01:03:08.927 に答える
0

次に、次のコードを作成する必要があります。

#menu ul li ul li {
  background-color: #ccc;
}
#menu ul li ul li.whitebg {
  background-color: #fff;
}

この方法でのみ、共通の親クラスを持つことができます。

!important互換性の問題になります。

于 2013-01-11T01:18:40.687 に答える