如何使用 CSS 更改将鼠标悬停在其父元素上时子元素的样式？

使用 CSS 更改悬停时的元素

将鼠标悬停在特定元素上时，您可能想要对另一个元素进行更改。这可以通过 CSS 来实现，但前提是隐藏元素是悬停元素的子元素。

考虑以下示例：

<div>

更改隐藏 div 的背景颜色当鼠标悬停在猎豹 div 上时，添加以下 CSS：

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

#cheetah:hover #hidden {
  background-color: orange;
  color: orange;
}

通过指定 #cheetah:hover #hidden，您仅当猎豹 div 悬停在上方时才选择隐藏的 div。这允许您更改其外观而不影响任何其他元素。

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