如何使用 CSS 更改悬停时同级 HTML 元素的颜色？

Patricia Arquette

发布： 2024-12-02 14:04:10

原创

327 人浏览过

How Can I Change the Color of Sibling HTML Elements on Hover Using CSS?

如何在 CSS 中更改悬停时同级元素的颜色

在 HTML 中，同级元素是共享相同父元素的元素。将鼠标悬停在特定元素上时，通常需要更改其同级元素的外观。

更改后续同级元素的颜色

更改某个元素的颜色悬停元素后面的同级元素，请使用 CSS 中的相邻同级选择器 ( )。例如，要更改以下的颜色：当前面的

为元素悬停：

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

登录后复制

限制：更改前一个同级元素的颜色

CSS 不提供直接方法来更改前一个同级元素的样式基于其兄弟元素的悬停状态的元素。

使用包装器Div

用 ID 将元素包装在 div 中允许您使用更复杂的 CSS 选择器更改前一个同级元素的颜色。

<div>

登录后复制

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

#banner h1:hover a {
  color: #4f4fd0;
}

#banner:hover a {
  color: #a04f4f;
}

登录后复制

这种方法允许更好地控制同级元素的样式，但它引入了额外的标记并且效率较低。

以上是如何使用 CSS 更改悬停时同级 HTML 元素的颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！