当前位置：首页 > article >正文

CSS实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果

article 2025/3/27 12:42:45

CSS可以实现当鼠标悬停在一个元素上时，另一个元素的样式发生变化的效果。可以通过以下几种方法来实现：

1. 使用兄弟选择器（Adjacent Sibling Selector）

如果两个元素是兄弟关系（即它们有相同的父元素），可以使用 + 或 ~ 选择器来实现。

示例代码：

<style>
  .element1:hover + .element2 {
    background-color: yellow;
  }
</style>

<div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，.element2 的背景颜色会变为黄色。

2. 使用通用兄弟选择器（General Sibling Selector）

如果两个元素是兄弟关系，但不一定是紧邻的，可以使用 ~ 选择器。

示例代码：

<style>
  .element1:hover ~ .element2 {
    background-color: yellow;
  }
</style>

<div class="element1">悬停在我上面</div>
<div class="element3">其他元素</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，所有后续的 .element2 元素的背景颜色会变为黄色。

3. 使用父选择器（Parent Selector）

如果两个元素是父子关系，可以通过父选择器来实现。

示例代码：

<style>
  .parent:hover .child {
    background-color: yellow;
  }
</style>

<div class="parent">
  <div class="child">悬停在父元素上时，我的背景会变黄</div>
</div>

在这个例子中，当鼠标悬停在 .parent 上时，.child 的背景颜色会变为黄色。

4. 使用 CSS 变量（CSS Variables）

如果需要更复杂的控制，可以使用 CSS 变量来动态改变样式。

示例代码：

<style>
  :root {
    --color: white;
  }

  .element1:hover {
    --color: yellow;
  }

  .element2 {
    background-color: var(--color);
  }
</style>

<div class="element1">悬停在我上面</div>
<div class="element2">另一个元素</div>

在这个例子中，当鼠标悬停在 .element1 上时，CSS 变量 --color 会被设置为黄色，从而影响 .element2 的背景颜色。

5. 使用 JavaScript

如果 CSS 的选择器无法满足需求，可以使用 JavaScript 来实现更复杂的交互。

示例代码：

<style>
  .element2 {
    background-color: white;
  }
</style>

<div class="element1" onmouseover="changeStyle()" onmouseout="resetStyle()">悬停在我上面</div>
<div class="element2" id="element2">另一个元素</div>

<script>
  function changeStyle() {
    document.getElementById('element2').style.backgroundColor = 'yellow';
  }

  function resetStyle() {
    document.getElementById('element2').style.backgroundColor = 'white';
  }
</script>