CSS：将鼠标悬停在一个元素上，对多个元素产生效果

在本文中，我们将介绍如何使用CSS来实现鼠标悬停在一个元素上时，对多个元素产生效果的方法。

阅读更多：CSS 教程

使用CSS选择器和兄弟选择器

我们可以利用CSS选择器和兄弟选择器来实现对多个元素的效果。通过将要实现效果的元素放在同一个父元素中，然后对父元素应用悬停效果，从而达到对多个元素产生效果的目的。

假设我们有一个导航栏，其中包含多个链接项，我们希望在鼠标悬停在某个链接上时，其他链接项也发生样式变化。可以使用以下示例代码来实现：

<ul class="nav-bar">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <li><a href="#">链接3</a></li>
  <li><a href="#">链接4</a></li>
</ul>

.nav-bar li:hover {
  background-color: #F0F0F0;
}

.nav-bar li:hover a {
  color: #FF0000;
}

在上面的代码中，我们使用.nav-bar li:hover选择器来选中导航栏中的每个链接项，并在鼠标悬停时应用样式。.nav-bar li:hover a选择器则用于选中导航栏中的每个链接元素，并在鼠标悬停时应用样式。这样，当鼠标悬停在任意一个链接上时，其他链接的样式也会发生相应变化。

使用CSS伪类选择器

除了使用选择器和兄弟选择器，我们还可以使用CSS伪类选择器来实现对多个元素的效果。伪类选择器是应用在某个元素的特殊状态下的选择器，比如鼠标悬停、获得焦点等。

下面是使用CSS伪类选择器实现对多个元素效果的示例代码：

<ul class="nav-bar">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <li><a href="#">链接3</a></li>
  <li><a href="#">链接4</a></li>
</ul>

.nav-bar li:hover,
.nav-bar li:focus {
  background-color: #F0F0F0;
}

.nav-bar li:hover a,
.nav-bar li:focus a {
  color: #FF0000;
}

在上面的代码中，我们使用:hover伪类选择器来选中导航栏中的每个链接项，并在鼠标悬停时应用样式。同样地，:focus伪类选择器用于选中导航栏中的每个链接元素，并在获得焦点时应用样式。这样，当鼠标悬停或链接获得焦点时，其他链接的样式也会相应改变。

使用JavaScript和CSS类

除了纯CSS的实现方法，我们还可以结合JavaScript来实现鼠标悬停一个元素时对多个元素产生效果。通过添加或移除CSS类来改变元素的样式。

以下是使用JavaScript和CSS类实现的示例代码：

<ul class="nav-bar">
  <li><a href="#">链接1</a></li>
  <li><a href="#">链接2</a></li>
  <li><a href="#">链接3</a></li>
  <li><a href="#">链接4</a></li>
</ul>

.nav-bar li.hover {
  background-color: #F0F0F0;
}

.nav-bar li.hover a {
  color: #FF0000;
}

const navItems = document.querySelectorAll('.nav-bar li');

navItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    navItems.forEach(item => item.classList.remove('hover'));
    item.classList.add('hover');
  });
});

在上面的代码中，我们首先定义了一个CSS类.nav-bar li.hover，通过添加和移除该类来实现样式变化。然后，使用JavaScript选中导航栏中的每个链接项，并为每个项添加鼠标悬停事件监听器。在事件处理程序中，我们先移除所有链接项的.hover类，然后再为当前链接项添加.hover类。这样，当鼠标悬停在某个链接上时，其他链接的样式会恢复默认，当前链接会应用样式变化。