css - ネストされたアイテムにカーソルを合わせると、その親に影響を与える可能性がありますか？

Question

純粋なCSSを使用したメニューがあり、親liアイテムにカーソルを合わせると、ネストされたリストが表示されます。簡単な例：

  <ul id="menu-top" >
    <li class="menu-item">
      <a href="http://localhost/wp5/forums/">Forums</a>
      <ul class="sub-menu">
        <li><a href="http://localhost/wp5/register/">Register</a></li>
        <li><a href="http://localhost/wp5/activate/">Activate</a></li>
        <li><a href="http://localhost/wp5/members/">Members</a></li>
      </ul>
    </li>
  </ul>

css：

.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color

.navigation ul.sub-menu li {
 display:none;
}

.navigation ul li:hover > ul.sub-menu li { display: block; }

正常に動作しますが、「永続的な」効果を追加しようとしています。サブアイテムにもカーソルを合わせるときに、親スタイルを設定したままにしておきます。

私はこれを試しましたが、動作しません：

.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}

これがjavscriptなしで可能かどうかはわかりませんが、CSSでの「>」の使用についても何も見つかりません。

助けてくれてありがとう

Answer 1

:hoverホバーされている要素のすべての祖先でトリガーされるため、.navigation ul.menu li:hover { background: #ccc; }問題なく動作するはずです。

あるいは、いつかは使えるようになるはず:has()です。

Answer 2

.menu-item:hover {
     background-color:#ccc;
}
.sub-menu li:hover {
     background-color:#666;
}