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

如何使用 CSS 悬停选择性地更改同级元素的颜色

将鼠标悬停在元素上时，可以采用某些 CSS 技术来改变其相邻元素的外观。

定位后续元素Siblings

在 CSS 选择器中使用“ ”符号可以让您定位紧跟在您悬停的元素后面的元素。例如，以下代码会在悬停前面的“h1”元素时更改“a”元素的颜色：

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

定位以前的兄弟姐妹

但是，CSS 在针对以前的兄弟姐妹时有局限性。要实现类似的效果，您需要将元素包装在父容器中，并使用通用同级选择器“~”来定位所需的元素。但是，此方法可能并不总是能产生所需的结果。

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

示例场景

考虑以下 HTML 标记：

<h1>

要在悬停 id 为“title”的“h1”时更改“a”元素的颜色，您可以使用以下 CSS：

#title:hover + .button { color: #4f4fd0; }

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