使用CSS更改悬停时同级元素的颜色

一尘不染

使用CSS更改悬停时同级元素的颜色

html

以下是我的HTML

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

我想要做的是，当我将<a>标签悬停时，我想<h1>仅使用CSS 来更改标签的颜色。我该如何实现？

PS ----- 已编辑 ----------

如果我将div周围包裹一个ID，该怎么办？

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

这有帮助吗？

阅读 618

2020-05-10

共1个答案

一尘不染

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

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

您将只能使用JavaScript来实现此。这看起来像：

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

2020-05-10