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

Patricia Arquette

发布： 2024-11-22 11:07:15

原创

662 人浏览过

How Can I Change a Child Element's Style on Hovering Over Its Parent Element Using 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中文网其他相关文章！

来源：php.cn

上一篇：CSS 中的“背景”和“背景颜色”有什么区别？下一篇：换行后如何在 Flexbox 布局中保持一致的项目宽度？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章