如何在悬停时更改另一个元素 - CSS

在CSS中，可以使用:hover伪类选择器来在元素上悬停时应用样式。但是，如果想要在一个元素上悬停时更改另一个元素的样式，该怎么做呢？

以下是两种方法：

1. 相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）可选择介于两个元素之间的兄弟元素，且必须紧跟在第一个元素之后。可以使用相邻兄弟选择器来更改兄弟元素的样式。

示例代码如下：

/* 当ul悬停时，改变后续的p颜色 */
ul:hover + p {
  color: red;
}

• 上面的CSS代码将使ul:hover时的下一个p元素变成红色。

2. 通用兄弟选择器

通用兄弟选择器（General Sibling Selector）可选择与指定元素拥有相同父元素的所有兄弟元素，不需要紧跟在第一个元素之后。同样，可以使用通用兄弟选择器来更改兄弟元素的样式。

示例代码如下：

/* 当ul悬停时，改变所有后续的p颜色 */
ul:hover ~ p {
  color: red;
}

• 上面的CSS代码将使ul:hover时的所有后续p元素变成红色。

以上两种方法都能实现在悬停时更改另一个元素的样式。选择使用哪种方法取决于HTML结构。需要特别注意的是兄弟选择器只能控制后续的元素，无法控制前面的兄弟元素。