CSS hover 更改其他元素

CSS hover 是一种常用的 CSS 伪类选择器，其可以在鼠标指针悬停在特定元素上时改变此元素的样式。但是，CSS hover 还可以用于更改其他元素的样式，本文将介绍一些常用的技巧。

1. 相邻兄弟选择器（Adjacent Sibling Selector）

使用相邻兄弟选择器，可以在鼠标悬停在某个元素时，改变旁边（下一个）元素的样式。

a:hover + p {
  background-color: yellow;
}

当鼠标悬停在 a 元素上时，会将下一个 p 元素的背景色修改为黄色。

2. 通用兄弟选择器（General Sibling Selector）

通用兄弟选择器可以选择任意位置的相邻元素，而不仅仅是下一个元素。同样的，当鼠标悬停在某个元素上时，将会改变下一个元素的样式。

h1:hover ~ p {
  background-color: yellow;
}

当鼠标悬停在 h1 元素上时，会将后面的所有 p 元素的背景色修改为黄色。

3. 子元素选择器（Child Selector）

子元素选择器可以选择某个元素的子元素，并且只有当光标悬停在父元素上时，子元素才会改变样式。

nav ul li:hover > a {
  background-color: yellow;
}

当鼠标悬停在某个 li 元素上时，会将其子元素 a 的背景色修改为黄色。

4. 属性选择器（Attribute Selector）

CSS 属性选择器可以根据元素的属性选择一个元素，并且只有当光标悬停在此元素上时，才会改变其他元素的样式。

[title]:hover {
  background-color: yellow;
}

当鼠标悬停在具有 title 属性的元素上时，会将所有具有 title 属性的元素的背景色修改为黄色。

以上就是 CSS hover 更改其他元素的一些常用技巧。除了上述方法，还有很多其他的选择器和技巧可以使用，需要根据具体场景进行选择。