css - CSSの別のクラスへのホバー効果

Question

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

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

<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 の下にある場合に機能しますが、ここでは機能しません。

score 6 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

これを試して：

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

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

score -2 · Accepted Answer

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

.dvchange1 {
  color:#fff;
    }
    .dvOne:hover .dvchange2 {
        color:#000;
    }

 <div class="dvchange1 dvchange2">
    <span class="">
    Hello
    <span>
    </div>

3 に答える 3