使用 CSS 更改悬停时兄弟元素的颜色

Question

在下面的 HTML 中，当我将鼠标悬停在 <a> 元素上时，我想仅使用 CSS 更改 <h1> 元素的颜色。有没有办法做到这一点？

 <h1>Heading</h1>
<a class="button" href="#"></a>

如果我用一个 id 在它周围包裹一个 div 怎么办？

 <div id="banner">
    <h1>Heading</h1>
    <a class="button" href="#"></a>
</div>

这会有帮助吗？

原文由 nasty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有 CSS 选择器 可以做到这一点（ 在 CSS3 中，甚至）。 CSS 中的元素永远不会知道它们的父级，所以你不能做 a:parent h1 （例如）。他们也不知道他们的兄弟姐妹（在大多数情况下），所以你不能这样做 #container a:hover { /* do something with sibling h1 */ } 。 基本上，CSS 属性只能修改元素及其子元素（它们不能访问父元素或兄弟元素）。

您可以在 h1 中 包含 a ，但这会使您的 h1 也可以悬停。

您只能使用 JavaScript（ jsFiddle 概念证明）来实现这一点。这看起来像：

 $("a.button").hover(function() {
    $(this).siblings("h1").addClass("your_color_class");
}, function() {
    $(this).siblings("h1").removeClass("your_color_class");
});

原文由 Cat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个单行纯 CSS 解决方案：

 .parent:hover .child:not(:hover) {
  /* this style affects all the children *except* the one you're hovering over */
  color: red;
}

更多信息： https ://codyhouse.co/nuggets/styling-siblings-on-hover

原文由 Fred K 发布，翻译遵循 CC BY-SA 4.0 许可协议