CSS Hover 更改多个元素

CSS Hover 是一种在鼠标指针悬停在 HTML 元素上时更改其样式的方法。虽然最常见的用法是改变单个元素的样式，但是您也可以使用 CSS Hover 更改多个元素的样式。

使用 CSS Class

一种方法是在 HTML 中创建一个共享样式的类，然后在悬停时将其应用于多个元素。以下是示例 HTML 和 CSS 代码：

<div class="hover-effect">元素1</div>
<div class="hover-effect">元素2</div>
<div class="hover-effect">元素3</div>

.hover-effect:hover {
  color: red;
  background-color: yellow;
  font-weight: bold;
}

在这个例子中，悬停在任何一个 .hover-effect 元素上都会应用相同的样式。

使用 CSS 选择器

另一种方法是使用 CSS 选择器在悬停时同时更改多个元素的样式。以下是一些常见的选择器：

• 类选择器：.class
• ID 选择器：#id
• 后代选择器：parent child
• 相邻兄弟选择器：prev + next
• 通用兄弟选择器：prev ~ siblings

下面的示例使用相邻兄弟选择器：

<div>元素1</div>
<div>元素2</div>
<div>元素3</div>

div:hover + div {
  font-weight: bold;
}

在这个例子中，只有在悬停在第一个 div 元素上时，才会使得下一个 div 元素变粗。

总结

通过使用 CSS Class 或 CSS 选择器，您可以使用 CSS Hover 更改多个元素的样式。这可以让您创建出更有趣的和动态的效果，使您的 HTML 内容更加吸引人。

-- 完 --