jquery - jquery addClassよりも強力なcssスタイルシート?

Question

やあ皆さん、これは私を夢中にさせます。スタイルシートで次のように定義しました。

ul#menuCnt li a {
   color:"red";
}

ホバー効果を作成したい場合、jquery を使用しても色は変わりません。

$("ul#menuCnt li a").hover(function() {
        $(this).addClass("brown");
    }, function() {
        $(this).removeClass("brown");
    });

私は本当に混乱しています。CSS スタイルシートで色を定義しないと、hovereffect が機能します。

あなたが私を助けてくれることを願っています。皆さんはjqueryとcssを学ぶことで私をとても助けてくれました:)

ありがとうございました！

score 10 · Accepted Answer

css の優先順位に従って、クラス .brown が css ファイルで次のように定義されている場合:

.brown{}

内部のルールは、# セレクターの同じルールをオーバーライドしません。

!importantキーワードを使用してそれらをオーバーライドできます。

.brown {
    color: brown !important;
}

これはここでは最善の解決策ではありませんが、うまくいきます... !important を使用しないほど、コードが読みやすくなります。

score 2 · Accepted Answer

CSSに.brownセレクターはありますか? また、aタグには非常に優れた:hoverセレクターが組み込まれているため、悪い選択になる可能性があります。

score 2 · Accepted Answer

これを行うためにcssを使用する際の問題について言及しているとは思わないので、試してみませんか:

ul#menuCnt li a:hover {
   color:"brown";
}

編集:それはアンカーであるため、実際にはie6で動作するはずです:) JavaScriptを使用して実行するよりもはるかに高速です。

score 2 · Accepted Answer

ここには非常に具体的な要素指定子があります。これは単純な .brown クラスセレクターよりも重要であると考えられているため、あまり効果がありません。

詳細については、たとえばこのサイトを参照してください

score 1 · Accepted Answer

CSS 疑似クラスを使用しないのはなぜ:hoverですか? 例えば：

#menuCnt li a {
    color: "red";
}

#menuCnt li a:hover {
    color: "brown";
}

また、セレクターで「UL」を使用する必要はありません。ID 属性は DOM 内で一意でなければならないため、ページ上に ID "menuCnt" を持つ他の要素が存在することはありません。

score 0 · Accepted Answer

IE / FFでいくつかのテストを行ったところ、スタイルシート（ul＃menuCnt）に要素のIDを含めると、少なくとも私が採用したメソッド（toggleClass、addClass、removeClassなど）では、JQueryがそのスタイルをオーバーライドできないことがわかりました。

（スタイルシートでIDを指定する代わりに）タグの要素にクラスを割り当てると、JQueryでそれをオーバーライドできます。

スタイルからIDを削除すると、JQueryでオーバーライドできます（実際には有用ではありませんが、動作を示すのに適しています）。

実際、スタイルシートにIDを残し、タグ内に別のクラスを割り当てようとすると、スタイルシートにIDに関連付けられたクラスが表示されます。

注：Vincentの投稿は、なぜこの動作が見られるのかを示唆しています。

また、CSSで：hoverを使用するというexhumaの提案にも同意します。

6 に答える 6