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

【问题标题】：How can I hover on an element and change the style of far ancestor? [duplicate]如何将鼠标悬停在元素上并更改远祖的样式？ [复制]
【发布时间】：2018-09-16 05:45:28
【问题描述】：

<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 中的父选择器。

【问题讨论】：

不，这就像 parent-inception。- 他们的问题是“如何选择作为锚元素的直接父元素的
元素？”这个问题也是 9 年前提出的 - 我更喜欢更清洁的解决方案 - 如果可能，不要使用 js

@Jessica：也许这个问题应该修改为一般将“父母”改为“祖先”，因为大多数开发人员确实错误地将远祖称为父母......无论如何，它没有无论您想要的元素是父元素还是远祖元素，都没有干净的 CSS 解决方案。

即便如此，answer 今年还是更新了。

标签： css css-selectors hover

【解决方案1】：

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

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

Here is an example

【讨论】：