在类上悬停另一个类颜色变化 - CSS

在网站设计中，页面的交互效果对于用户体验来说非常重要。CSS的:hover伪类提供了一种改变样式的方法，当用户将鼠标悬停在某个元素上时触发。

但是有时候我们需要在悬停在一个元素上时改变其他元素的样式。比如说，我们希望在悬停在一个导航菜单上时，改变页面其他区域的背景色或字体颜色。这时候可以使用CSS的兄弟选择器以及子选择器。

兄弟选择器

兄弟选择器使用+符号，选择紧接在一个元素后面的兄弟元素。例如下面的代码：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1:hover + .box2 {
  background-color: red;
}

当鼠标悬停在.box1上时，.box2的背景色就会变成红色。

子选择器

子选择器使用>符号，选择某个元素下一级的子元素。例如下面的代码：

<div class="parent">
  <div class="child"></div>
</div>

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

当鼠标悬停在.parent上时，.child的背景色就会变成蓝色。

组合使用

使用兄弟选择器和子选择器，我们可以实现在悬停在一个元素上时，改变其他任意元素的样式。例如下面的代码：

<div class="menu">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</div>

.menu li:hover > a {
  color: red;
}
.menu li:hover + li:hover > a {
  color: blue;
}
.menu li:hover + li:hover + li:hover > a {
  color: green;
}
.menu li:hover + li:hover + li:hover + li:hover > a {
  color: orange;
}

当鼠标悬停在.menu的链接上时，.content的段落会分别变成红色、蓝色、绿色和橙色。

注意，这里选择的是直接兄弟元素，因此.menu区域的上下元素不会被影响。 总之，使用兄弟选择器和子选择器，可以让我们更灵活地控制页面元素的样式，提高用户交互效果。