has()とnot()を組み合わせると、子要素がホバーされている時はスタイルを当てない、という指定ができる。

コードサンプル

html

<style>
li:hover{
    color:red;
}

ul:hover:not(:has(ul:hover))> li{
    background-color:blue;
}
</style>
<ul>
  <li>子要素をホバーすると、文字色は両方赤になる。
    <ul>
      <li>でも背景色が青になるのは子要素だけ。</li>
    </ul>
  </li>
</ul>

このサンプルでは、親要素をホバーすると全体が青くなる。子要素のulが親要素のliの中に収まっているため当然だ。直下のliのテキストだけにスタイルを当てたい時は、別の要素でラップすれば良い。

html
<style>
ul:hover:not(:has(ul:hover))> li>span{
    background-color:yellow;
}
</style>
<ul>
  <li><span>親要素をホバーすると、親要素のテキストの背景だけが黄色になる。</span>
    <ul>
      <li><span>子要素を以下同文</span></li>
    </ul>
  </li>
</ul>

参考資料