ユーザーがマウスでクラス名が"reMode_hover"
の要素にカーソルを合わせたときに、背景色を適用しようとしています。
しかし、要素alsoに"reMode_selected"
がある場合、色を変更したくない
注:何らかの制限された環境で作業しているため、JavaScriptではなくCSSのみを使用できます。
明確にするために、私の目標はホバー上の最初の要素に色を付けることですが、2番目の要素には色を付けないことです。
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
最初の定義が機能することを期待して以下で試しましたが、機能しません。何が間違っていますか?
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
1つの方法は、複数クラスセレクターを使用することです(子孫セレクターであるため、スペースはありません)。
.reMode_selected.reMode_hover:hover
{
background-color: transparent;
}
別の方法は、:not()
セレクタを使用することです
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
最新のブラウザでは次のことができます。
.reMode_hover:not(.reMode_selected):hover{}
互換性情報については、 http://caniuse.com/css-sel を参照してください。
コードの問題は、.remode_hover
のdescendantである.remode_selected
を選択していることです。したがって、コードを正しく動作させるための最初の部分は、そのスペースを削除することです
.reMode_selected.reMode_hover:hover
次に、スタイルが機能しないようにするには、:hover
で設定されたスタイルをオーバーライドする必要があります。つまり、background-color
プロパティに対抗する必要があります。最終的なコードは
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
別の方法は、他の人が述べたように、:not()
を使用することです。これは、括弧内にクラスまたはプロパティが指定されていない要素を返します。この場合、そこに.remode_selected
を配置します。これは、.remode_selected
のクラスを持たないすべての要素を対象とします
ただし、CSS3で導入されたため、この方法はお勧めしません。したがって、ブラウザーのサポートは理想的ではありません。
3番目の方法は、jQueryを使用することです。 .not()
セレクターをターゲットにできます。これは、CSSで:not()
を使用するのに似ていますが、ブラウザーのサポートがはるかに優れています