在悬停 CSS 上控制另一个 DIV

当用户将鼠标悬停在一个元素上时，我们可以用 CSS 控制另一个元素的样式。这通常被用来为网页增加各种效果使用户体验更佳。下面我们来看一些实现此效果的方法。

1.通过子选择器

我们可以利用子选择器来实现悬停在一个元素上改变另一个元素的样式。下面是一个例子：

<div class="hover-controls">
  <div class="target-div">Content</div>
</div>

.hover-controls:hover .target-div {
  background: #ccc;
}

当鼠标移到包含 .target-div 的 .hover-controls 元素上时， CSS 规则会将 .target-div 的背景颜色设置为灰色。

2.通过兄弟选择器

我们还可以通过兄弟选择器来实现悬停在一个元素上改变与其相邻的另一个元素的样式，例如：

<div class="hover-controls">
  <div class="first">Content</div>
  <div class="second">Content</div>
</div>

.first:hover + .second {
  background: #ccc;
}

当鼠标移到包含 .first 元素上时， CSS 规则会将 .second 的背景颜色设置为灰色。 注意这里我们是使用了兄弟选择器 + 而不是后代选择器，这意味着 .second 必须是 .first 的下一个兄弟元素。

3.通过 CSS 变量

我们可以利用 CSS 变量来实现悬停在一个元素上改变另一个元素的样式。下面是一个例子：

<div class="hover-controls">
  <div class="target-div">Content</div>
</div>

.hover-controls:hover .target-div {
  --background-color: #ccc;
  background: var(--background-color);
}

当鼠标移到包含 .target-div 的 .hover-controls 元素上时， CSS 规则会将 .target-div 的背景颜色设置为变量 --background-color 的值，即灰色。

这个方法还有一个优点，我们可以动态更改变量 --background-color 的值而不需要改变 CSS 规则本身。

结论

以上我们介绍了三种不同的方法来实现悬停在一个元素上改变另一个元素的样式。无论你选择哪种方法，这些技巧都可以让你更好地控制你的页面并改善用户体验。

以上为 Markdown 格式的内容，代码片段需要按照 Markdown 标记来写，例如：

.hover-controls:hover .target-div {
  background: #ccc;
}