ユーザー名がであるクラス名の要素にマウスを置いたときに、背景色を適用しようとしています"reMode_hover"。

要素があればしかし、私は色を変更したくないもあり"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_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<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>

最新のブラウザでは、次のことができます。

.reMode_hover:not(.reMode_selected):hover{}

相談するhttp://caniuse.com/css-sel3の互換性情報のため。

方法1

コードの問題.remode_hoverは、の子孫であるを選択していることです.remode_selected。したがって、コードを正しく機能させるための最初の部分は、そのスペースを削除することです

.reMode_selected.reMode_hover:hover

次に、スタイルが機能しないようにするには、によって設定されたスタイルをオーバーライドする必要があります:hover。つまり、background-colorプロパティに対抗する必要があります。したがって、最終的なコードは

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

フィドル

方法2

他の方法で:not()述べられているように、代替方法はを使用することです。これは、括弧内に記述されたクラスまたはプロパティを持たない要素を返します。この場合、そこに入れます.remode_selected。これは、クラスのないすべての要素をターゲットにします.remode_selected

フィドル

ただし、この方法はCSS3で導入されたため、ブラウザのサポートは理想的ではないため、この方法はお勧めしません。

方法3

3番目の方法は、jQueryを使用することです。CSSでの.not()使用と同様のセレクターをターゲットにできますが、:not()ブラウザーのサポートが大幅に向上します

フィドル