深入理解：使用CSS和JavaScript实现悬停时对同组非当前元素添加样式

admin 百科 2025-12-09 14

本教程探讨如何实现当鼠标悬停在一组元素中的某个元素上时，为该组中除当前悬停元素之外的其他元素添加或移除特定样式。文章将详细介绍两种主要实现方式：纯css解决方案，利用父级`:hover`和子级`:not(:hover)`伪类组合；以及基于vanilla javascript的事件监听和`classlist`操作。通过具体代码示例和解析，帮助开发者根据项目需求选择最合适的交互实现方案。

在前端开发中，我们经常需要实现复杂的交互效果。其中一个常见的需求是，当用户鼠标悬停在一组元素中的某个特定元素上时，不是改变当前元素的样式，而是改变同组中其他非悬停元素的样式。例如，在一个列表或卡片组中，当鼠标悬停在第二项时，希望第一项和第三项的背景色发生变化。本文将详细介绍两种实现这种效果的专业方法。

方法一：纯CSS实现（推荐）

对于大多数此类需求，纯CSS解决方案是首选，因为它更简洁、性能更好，并且不需要额外的JavaScript代码。这种方法的核心在于利用CSS的伪类选择器组合：父元素的:hover状态与子元素的:not(:hover)状态。

实现原理

外部容器的:hover: 当鼠标悬停在包含所有子元素的父容器上时，表示整个组处于“活跃”状态。
子元素的:not(:hover): 在父容器处于:hover状态时，选择所有不是当前鼠标悬停目标的子元素。

示例代码

首先，我们需要一个HTML结构，将所有目标子元素包裹在一个父容器中。

HTML 结构:

立即学习“Java免费学习笔记（深入）”；

<p class="wrapper">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</p>

登录后复制

CSS 样式:

.wrapper {
  display: flex; /* 便于展示，非核心功能 */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper p {
  padding: 15px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  transition: background 0.3s ease; /* 添加过渡效果 */
}

/* 核心样式：当鼠标悬停在 .wrapper 上时，
   选择其中所有非当前悬停的 p 元素，并应用背景色 */
.wrapper:hover p:not(:hover) {
  background: red;
  color: white;
}

登录后复制