CSS 如何使父级元素在鼠标悬停和点击时激活子级元素的样式

在本文中，我们将介绍如何使用CSS使父级元素在鼠标悬停和点击时激活子级元素的样式。通常情况下，鼠标悬停或点击某个元素时，只有被悬停或点击的元素本身会发生样式变化。但是，通过使用CSS伪类选择器以及结合父级选择器，我们可以实现让父级元素在这些事件发生时，同时激活子级元素的样式变化。

阅读更多：CSS 教程

使用:hover伪类选择器

首先，让我们来看一下如何使父级元素在子级鼠标悬停时改变样式。我们可以使用:hover伪类选择器来实现这个效果。例如，我们有一个包含子级元素的div，通过以下方式可以使父级div在子级元素被鼠标悬停时改变背景颜色：

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

在上面的示例中，.parent:hover表示当鼠标悬停在父级元素上时，选择所有子级元素，并对它们使用background-color: yellow样式。

使用:active伪类选择器

接下来，让我们来看一下如何使父级元素在子级被点击时改变样式。我们可以使用:active伪类选择器来实现这个效果。例如，我们有一个包含子级元素的div，通过以下方式可以使父级div在子级元素被点击时改变背景颜色：

.parent:active .child {
  background-color: red;
}

在上面的示例中，.parent:active表示当父级元素被点击时，选择所有子级元素，并对它们使用background-color: red样式。

需要注意的是，:active伪类选择器只在元素被点击瞬间才有效果，一旦点击松开，样式会恢复到原始状态。

示例说明

让我们通过一个示例来更好地理解如何使用CSS使父级元素在鼠标悬停和点击时激活子级元素的样式。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .button {
      width: 100px;
      height: 50px;
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .text {
      color: white;
    }

    .button:hover .text {
      color: red;
    }

    .button:active .text {
      color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="button">
      <span class="text">Click me!</span>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们有一个容器(.container)里面包含一个按钮(.button)。当鼠标悬停在按钮上时，按钮文本变为红色；当点击按钮时，按钮文本变为绿色。

这是通过给按钮(.button)的:hover和:active伪类选择器添加样式来实现的。当鼠标悬停在按钮上时，.button:hover .text选择所有在按钮内部的文本，并改变它们的颜色为红色。当按钮被点击时，.button:active .text选择所有在按钮内部的文本，并改变它们的颜色为绿色。