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

Question

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

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

如果我用一个 id 包裹它周围会怎样？

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

这会有帮助吗？

Answer 1

您可以使 跟随 元素的同级元素在鼠标悬停时发生变化，例如，您可以在 h1 时更改 a 链接的颜色 悬停，但您不能以相同的方式影响前一个 兄弟。

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
h1:hover + a {
    color: #4f4fd0;
}
a:hover + h1 {
    background-color: #444;
}

<h1>Heading</h1>
<a class="button" href="#">The &quot;Button&quot;</a>
<h1>Another Heading</h1>

我们将 H1 的颜色设置为绿色色调，并将作为 H1 sibling 的 A 的颜色设置为红色(前 2 条规则)。第三条规则按照我的描述进行 - 当 H1 悬停时更改 A 颜色。

但请注意第四条规则a:hover + h1 只更改跟随 anchor 的 H1 的背景颜色，而不是它之前的 H1 的背景颜色。 p>

这是基于 DOM 顺序的，可以改变元素的显示顺序，所以即使你不能改变前一个元素，你也可以让那个元素出现 在其他元素之后以获得所需的效果。
请注意，这样做可能会影响可访问性，因为屏幕阅读器通常会按 DOM 顺序遍历元素，这可能与视觉顺序不同。

---

编辑

现在应该可以使用 has选择器，在支持它的浏览器中。
请参阅下面 CSS 中的注释。
以后我会再编辑；目前我的 Chrome 和 Safari 浏览器还没有支持它的版本。

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}
h1:hover + a {
    color: #4f4fd0;
}
a:hover + h1 {
    background-color: #444;
}
/* Select an H1 heading that has an <a>nchor as a sibling */
h1:has(+ a) {
    background-color: cyan;
}

/* Select an H1 heading that has a currently-hovered <a>nchor as a sibling */
h1:has(+ a:hover) {
    background-color: yellow;
}

<h1>Heading</h1>
<a class="button" href="#">The &quot;Button&quot;</a>
<h1>Another Heading</h1>