📜  悬停在父元素css上时如何选择子元素(1)

📅  最后修改于: 2023-12-03 15:09:56.440000             🧑  作者: Mango

当鼠标悬停在父元素上时,我们可以选择其子元素并更改其样式。这可以通过CSS中的伪类选择器:hover来完成。

例如,当鼠标悬停在父元素上时,我们想将子元素(一个div)的颜色更改为红色。你可以这样写CSS:

.parent:hover .child {
  color: red;
}

在上面的示例中,我们使用了hover伪类选择器,并将其应用于父元素。当父元素被悬停时,我们选择了其子元素child并将其文本颜色更改为红色。

此外,我们可以通过使用其他的CSS属性来改变子元素的样式,如改变其背景颜色、字体等。以下示例将更改子元素的背景颜色为黄色。

.parent:hover .child {
  background-color: yellow;
}

总结,我们可以使用hover伪类选择器来 改变父元素上子元素的样式。这是一个非常方便的技巧,可以为您的网页提供更丰富的用户体验。