2

アクティブなアイテムがロード時にアクティブなクラスを持ち、その背景を変更するメニューがあります。

他のアイテムをホバーすると、ホバーしたアイテムの背景が変わります。

<ul>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>

<style>
  li:hover, li.active {background:black}
</style>

純粋なCSSでホバーする他のアイテムのアクティブなクラスの背景を削除する方法はありますか. 何かのようなもの:

li.hover .active {background:none}

これは、active が li の下にある場合に機能しますが、ここでは機能しません。

4

3 に答える 3

6

これは、CSS では確実に可能ではありません。CSS は、以前ではなく、DOM で後で表示される要素にのみ影響を与えることができるため、最初 の要素にカーソルを合わせると、次の CSS を使用しliて現在の要素に影響を与える可能性があります。li.active

li:hover ~ li.active {
    background-color: #f00; /* or whatever */
}

JS フィドルのデモ

ただし、3 番目にカーソルを合わせても、同じ要素に影響を与えるli ことはできません。li.active

ただし、次の場合は機能します。

ul:hover li.active {
    background-color: transparent;
}

JS フィドルのデモ

于 2012-07-22T21:18:14.297 に答える
0

これを試して:

ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }

これにはいくつかの条件があります。

  1. :not疑似タグ対応ブラウザ
  2. のパディングや空のスペースが多すぎてはulいけません。:hoverulli
于 2012-07-22T21:09:22.777 に答える
-2

これは私のために働いた:

.dvchange1 {
  color:#fff;
    }
    .dvOne:hover .dvchange2 {
        color:#000;
    }
 <div class="dvchange1 dvchange2">
    <span class="">
    Hello
    <span>
    </div>

于 2017-10-26T11:56:27.870 に答える