当父元素悬停在其上时，如何设置子元素的样式？

父级悬停时子元素的样式

在各种情况下，当用户将鼠标悬停在其父元素上时，需要更改子元素的样式。这主要可以通过 CSS 解决方案来实现，特别是利用 :hover 伪类选择器。

例如，如果您希望当用户将鼠标悬停在面板上时更改面板内选项栏的颜色，CSS 提供一个简单的方法：

.parent:hover .child {
  /* Style for child element on hover */
}

此代码段使用 :hover 伪类来指定样式更改仅应在父元素 (.parent) 时应用于子元素 (.child)都悬停在上面。后代组合符（空格）允许我们选择与子选择器匹配的父元素的任何后代。

考虑这个实例：

<div class="parent">
  Parent
  <div class="child">
    Child
  </div>
</div>

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

此代码修改背景颜色、变换比例以及当父元素悬停在其上时调整子元素的内嵌边框，展示了 CSS 在这种情况下的有效性。

以上是当父元素悬停在其上时，如何设置子元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！