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

在父元素悬停时设置子元素的样式

将鼠标悬停在其父元素上时需要修改子元素的外观吗？输入 CSS 强大的 :hover 选择器。

要执行此操作：

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

使用此选择器，当父元素“.parent”悬停时，您将定位子元素。后代组合器（空格）选择与“.child”匹配的后代。

例如：

.parent:hover .child {
  background-color: #ccc;
}

当鼠标悬停在父元素上时，子元素的背景会变成灰色。

实例：

<div class="parent">
  <p class="child">Hover me</p>
</div>

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

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background-color: #ccc;
  transform: scale(1.1);
}

此示例将子元素的背景更改为灰色并在父级悬停时稍微放大。

请记住，此处涵盖了您的浏览器支持。深入研究 CSS 并增强您的用户体验！

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