如何将鼠标悬停在元素上并改变远祖的风格？ [重复]

Posted 2021-04-06

这个问题在这里已有答案：

• Is there a CSS parent selector? 30个答案

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

我想在悬停在链接上时使用类header-wrapper更改div的背景颜色。我可以用css或scss做到这一点吗？

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

还有几个变种，scss中的父选择器。

答案

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

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

Here is an example