CSS 当悬停在CSS列表项上时，更改父级项的CSS

在本文中，我们将介绍如何在悬停在CSS列表项上时更改父级项的CSS样式。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

CSS伪类选择器

在CSS中，我们可以使用伪类选择器来针对特定的元素状态应用样式。其中，”:hover”伪类选择器用于选择鼠标悬停在元素上时的状态。通过使用该伪类选择器，我们可以在悬停在CSS列表项上时更改其样式。

示例

假设我们有一个带有多个子项的CSS列表。每个子项都有自己的样式，但我们希望在悬停某个子项时更改父级项的样式。

首先，让我们创建一个HTML文档并添加CSS样式：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 5px;
}

li:hover {
  background-color: #ccc;
}

li:hover ~ li {
  background-color: #f0f0f0;
}
</style>
</head>
<body>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
</ul>

</body>
</html>

在这个示例中，我们使用了“ul”和“li”选择器来设置整个列表和每个列表项的样式。通过使用“:hover”伪类选择器，我们在鼠标悬停在列表项上时更改其背景颜色。

从上述代码中可以看到，在悬停在一个列表项上时，我们将其背景颜色更改为灰色。同时，通过使用“~”选择器，我们还将其他子项的背景颜色恢复为默认的灰白色。

CSS后代选择器

上面的示例展示了如何通过使用“:hover”伪类选择器在悬停在列表项上时更改其CSS样式。但是，如果我们想通过悬停在子项上来更改父级项的样式，我们需要使用CSS后代选择器。

下面是一个示例，展示了如何使用后代选择器来更改父级项的样式：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 5px;
}

.container:hover {
  background-color: #ccc;
}

.container:hover .child {
  color: red;
}
</style>
</head>
<body>

<div class="container">
  <p>父级项</p>
  <p class="child">子项1</p>
  <p class="child">子项2</p>
  <p class="child">子项3</p>
</div>

</body>
</html>

在这个示例中，我们使用类选择器来设置父级项和子项的样式。通过使用“:hover”伪类选择器，我们在鼠标悬停在父级项上时更改其背景颜色。而通过使用后代选择器“.container:hover .child”，我们则在悬停在父级项上时更改子项的颜色为红色。