如何使用 CSS 间接修改悬停时元素的样式？

在悬停时实现间接元素修改

在 Web 开发中，基于用户交互操作各种元素至关重要。一种常见的场景是当鼠标悬停在一个元素上时触发另一个元素的更改。

考虑 JSFiddle 演示中提供的示例。当 #cube 元素悬停在其上方时，其背景颜色会变为蓝色。然而，假设我们想在 #container 元素悬停时实现这种效果。我们如何完成这种间接修改？

使用 CSS :hover 伪类，我们可以指定当某个元素悬停在另一个元素上时，另一个元素应该发生更改。让我们探索可用的选项：

直接在容器内建立立方体：

如果 #cube 元素直接嵌套在 #container 元素中，我们可以使用以下 CSS 选择器:

#container:hover > #cube { background-color: yellow; }

仅当 #cube 元素是 #container 元素的直接子元素时，此选择器才以 #cube 元素为目标并且 #container 元素悬停在上面。

与容器相邻的立方体：

如果 #cube 元素紧邻 #container 元素（在它旁边）之后，我们可以使用这个选择器：

#container:hover + #cube { background-color: yellow; }

这个选择器的目标是紧跟在 #container 之后的 #cube 元素当 #container 元素悬停在上面时的元素。

容器内嵌套元素内的立方体：

当 #cube 元素嵌套在 #container 内的另一个元素内时元素，我们可以使用这个选择器：

#container:hover #cube { background-color: yellow; }

这个选择器针对的是所有 #cube 元素的后代#container 元素，当 #container 元素悬停在上方时。

容器的同级立方体：

如果 #cube 元素与 #container 处于同一层次结构级别元素，我们可以使用这个选择器：

#container:hover ~ #cube { background-color: yellow; }

这个选择器的目标是 #cube 元素，它是当 #container 元素悬停在 #container 元素上时（即，它们共享相同的父元素）。

通过利用这些 CSS 选择器，当特定元素悬停在上面时，您可以轻松修改其他元素的属性，建立交互式且具有视觉吸引力的网络体验。

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