CSS 悬停一个元素，并改变另一个元素（无需使用Javascript）

在本文中，我们将介绍如何使用纯CSS实现悬停一个元素时，改变另一个元素的效果，而无需使用Javascript。

阅读更多：CSS 教程

CSS选择器

在CSS中，我们可以使用选择器来选取元素并应用样式。为了实现悬停一个元素时改变另一个元素的效果，我们可以使用CSS选择器来选择被悬停元素的兄弟、子元素或后代元素。

兄弟元素选择器

兄弟元素选择器（~）可以选取前面的元素之后所有具有相同父元素的元素。

.element:hover ~ .another-element {
  /* 悬停.element时，改变.another-element的样式 */
}

示例：

<div class="element">悬停我</div>
<div class="another-element">我将改变样式</div>

.element:hover ~ .another-element {
  color: red;
}

结果：当我们悬停在第一个元素上时，第二个元素将变为红色。

子元素选择器

子元素选择器（>）可以选取父元素下的直接子元素。

.parent-element:hover > .child-element {
  /* 悬停.parent-element时，改变.child-element的样式 */
}

示例：

<div class="parent-element">
  悬停我
  <div class="child-element">我将改变样式</div>
</div>

.parent-element:hover > .child-element {
  color: blue;
}

结果：当我们悬停在父元素上时，子元素将变为蓝色。

后代元素选择器

后代元素选择器（空格）可以选取任意深度的后代元素。

.ancestor-element:hover .descendant-element {
  /* 悬停.ancestor-element时，改变.descendant-element的样式 */
}

示例：

<div class="ancestor-element">
  悬停我
  <div>
    <p class="descendant-element">我将改变样式</p>
  </div>
</div>

.ancestor-element:hover .descendant-element {
  font-weight: bold;
}

结果：当我们悬停在祖先元素上时，后代元素的文字将加粗显示。

伪类选择器

CSS还提供了许多伪类选择器，例如:hover、:active、:focus等，可以在特定状态下选择元素。

.element:hover {
  /* 悬停.element时应用的样式 */
}

示例：

<button class="element">悬停我</button>

.element:hover {
  background-color: yellow;
}

结果：当我们悬停在按钮上时，按钮的背景色将变为黄色。

结构伪类选择器

结构伪类选择器可以根据元素在DOM树中的位置选取元素。例如，:first-child可以选择元素的第一个子元素。

.parent-element:hover > .child-element:first-child {
  /* 悬停.parent-element时，改变子元素中的第一个元素的样式 */
}

示例：

<div class="parent-element">
  <div class="child-element">悬停我</div>
  <div class="child-element">不悬停</div>
</div>

.parent-element:hover > .child-element:first-child {
  color: green;
}

结果：当我们悬停在父元素上时，第一个子元素的文字将变为绿色。

优先级

在CSS中，选择器的优先级决定了样式的应用顺序。如果有多个选择器可以匹配一个元素，就会根据选择器的优先级来决定样式的应用。

一般而言，ID选择器的优先级最高，其次是类选择器和属性选择器，最后是元素选择器。当优先级相同时，后定义的样式会覆盖前面的样式。

#element {
  /* 样式A */
}

.element {
  /* 样式B */
}

示例：

<div id="element" class="element">悬停我</div>

#element {
  color: blue;
}
.element {
  color: red;
}

结果：无论我们如何悬停在这个元素上，文字的颜色将始终为红色，因为具有类选择器的样式具有更高的优先级，覆盖了ID选择器的样式。

总结

通过CSS选择器和伪类选择器，我们可以实现在悬停一个元素时，改变另一个元素的效果，而无需使用Javascript。我们可以使用兄弟元素选择器、子元素选择器、后代元素选择器以及各种伪类选择器来达到这个目的。只需要灵活运用这些选择器，我们就能轻松实现元素之间的交互效果。记住，选择器的优先级也非常重要，要确保所需样式的优先级高于其他样式，以确保正确的效果展示。