如何将鼠标悬停在元素上并更改远祖的样式？

Question

<div class="header-wrapper">
    <div> 
        <nav>
           <ul>
               <li>
                 <a class="link" href="/">Link</a>
               </li>
           </ul>
        </nav>
    </div>
</div>

当我将鼠标悬停在链接上时，我想使用class header-wrapper更改div的背景颜色。 我可以仅使用CSS或CSS来做到这一点吗？

a.link:hover {
.header-wrapper {
    background: red;
   }
}

scss中的父选择器以及其他一些变体。

Answer 1

我认为只有css，scss才能选择父级，尽管它们适用于Selector-4。
现在，您必须使用javascript或jQuery来实现目的，因为select-4尚不支持所有浏览器。
幸运的是，您可以在:has()中使用选择器jQuery。

    $(".header-wrapper:has(a:hover)").addClass("hoverlink");

Here is an example