html - css を防ぐ: 要素にカーソルを合わせる

Question

次の HTML があるとします。

<div class="SomeClass">test</div>
<div class="SomeClass" id="SomeID">test</div>
<div class="SomeClass">test</div>

このCSSで

.SomeClass{color:blue;}
.SomeClass:hover{color:red}

SomeIDホバー効果がdivに適用されないようにしたい。jQueryでこれを行うことができますが、CSSだけで行うより簡単な方法があるかどうか疑問に思っていました.

ご提案いただきありがとうございます。

score 4 · Accepted Answer

CSS は順番に解析されます。

.SomeClass:hover { color: red; }

次に、ルールを定義します

#SomeId.SomeClass:hover { color: blue; }

それはイニシャルを「上書き」する必要がありますcolor: red;

score 3 · Accepted Answer

SomeIDのIDを持つdivに別のルールを割り当てるだけです。これにより、他のルールが上書きされます。

.SomeClass{color:blue;}
.SomeClass:hover{color:red}
#SomeID:hover{color:blue}

score 1 · Accepted Answer

スタイルを上書きするだけです：

#SomeID:hover {
    color:blue;
}

または、次を使用できます。

.SomeClass:not(#SomeID):hover {
    color:red;
}

その場合、変更は簡単ですが、ブラウザーのサポートは少なくなります。

score 0 · Accepted Answer

リンク疑似クラスの特異性を見てみましょう。

覚えておいてください: LAHV ( :link, :active, :hover, :visited)。

まず、適切にカスケードするために、次をに割り当てましょう.SomeClass。

.SomeClass:link, .SomeClass:active, .SomeClass:visited { color: blue; }
.SomeClass:hover { color: red; }

次に、指定しましょう#SomeID:

#SomeID:hover { color: blue; }

idは常によりも優先されclassます。

4 に答える 4