CSS 能否根据另一个元素的悬停状态影响同级元素的样式？

同级元素与 CSS Hover 的交互

在网页设计中，你可能会遇到这样的场景：想要根据元素修改同级元素的外观它的悬停状态。但是，CSS 中的此功能存在限制。

悬停时更改同级颜色

如果您有相邻元素并想要更改下一个同级元素的颜色当第一个元素（通常位于同级元素之前）悬停时，可以使用 CSS。例如，当“h1”标题悬停在“a”链接上方时，您可以更改其颜色。

h1 + a {
  color: #a04f4f;
}
h1:hover + a {
  color: #4f4fd0;
}

限制

但是，您不能以相同的方式影响前一个同级的颜色。如果您有一个“h1”标题，后跟一个“a”链接，并且想要在将鼠标悬停在链接上时更改标题的颜色，则使用 CSS 无法实现这一点。

a:hover + h1 {
  background-color: #444;  // This won't work
}

CSS 同级交互示例

这是一个示例，说明了此中可能和不可能的 CSS 交互上下文：

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

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

以上是CSS 能否根据另一个元素的悬停状态影响同级元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！