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

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

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

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

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

实现原理

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

示例代码

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

HTML 结构:

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

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

CSS 样式:

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

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

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

解析

• .wrapper:hover: 这个选择器首先匹配当鼠标悬停在.wrapper元素上时的状态。
• div:not(:hover): 在.wrapper处于悬停状态时，这个部分进一步筛选出所有子div元素中，当前鼠标没有悬停在其自身上的那些元素。

通过这种组合，我们精确地定位到了在父容器悬停时，所有非当前悬停子元素，并为它们应用了background: red的样式。

优点

• 简洁高效: 无需编写JavaScript，代码量少。
• 性能优异: 浏览器原生处理CSS伪类，性能开销小。
• 易于维护: 样式和结构分离，逻辑清晰。

方法二：JavaScript 实现

虽然CSS方法简单有效，但在某些复杂场景下，例如需要动态添加/移除的类名、根据更复杂的逻辑判断、或者与后端数据交互时，JavaScript提供了更高的灵活性和控制力。

实现原理

1. 事件监听: 为每个子元素添加mouseenter和mouseleave事件监听器。
2. 状态判断: 在事件触发时，判断是鼠标进入 (mouseenter) 还是鼠标离开 (mouseleave)。
3. 遍历与操作: 遍历所有子元素，为除当前触发事件的元素之外的其他元素添加或移除指定类。

示例代码

我们将使用Vanilla JavaScript来操作DOM。

Shepherd Study

一站式AI学习助手平台，提供AI驱动的学习工具和辅导服务

73

查看详情

HTML 结构:

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

与CSS方法相同，需要一个父容器包裹子元素。

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

CSS 样式:

我们需要定义一个表示“活跃”状态的类，例如.red。

.wrapper {
  display: flex;
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper div {
  padding: 15px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  transition: background 0.3s ease;
}

/* 定义要添加/移除的样式类 */
.red {
  background: red;
  color: white;
}

JavaScript 代码:

// 1. 获取所有目标 div 元素
const elDivs = document.querySelectorAll(".wrapper div");

/**
 * 切换非当前悬停 div 元素的样式类
 * @param {Event} evt - 触发的事件对象
 */
const toggleClassDivs = (evt) => {
  // 判断事件类型，确定是添加还是移除类
  const isEnter = evt.type === "mouseenter";

  // 遍历所有 div 元素
  elDivs.forEach(el => {
    // 如果是鼠标进入，则为所有元素添加 'red' 类
    // 如果是鼠标离开，则为所有元素移除 'red' 类
    el.classList[isEnter ? "add" : "remove"]("red");
  });

  // 移除当前悬停元素自身的 'red' 类
  // 这样就实现了“除了我，其他都变色”的效果
  evt.currentTarget.classList.remove("red");
};

// 2. 为每个 div 元素添加事件监听器
elDivs.forEach(el => {
  el.addEventListener("mouseenter", toggleClassDivs);
  el.addEventListener("mouseleave", toggleClassDivs);
});

解析

1. document.querySelectorAll(".wrapper div"): 选取所有.wrapper容器内的div元素，并将它们存储在一个NodeList中。
2. toggleClassDivs(evt) 函数:
   • const isEnter = evt.type === "mouseenter";: 判断当前触发的事件是mouseenter（鼠标进入）还是mouseleave（鼠标离开）。
   • elDivs.forEach(el => el.classList[isEnter ? "add" : "remove"]("red"));: 遍历所有的div元素。如果isEnter为true，则为所有元素添加red类；如果为false，则为所有元素移除red类。
   • evt.currentTarget.classList.remove("red");: 这一步是关键。在所有元素都被统一处理后，我们单独将当前触发事件的元素（evt.currentTarget）的red类移除。这样就实现了“除了当前元素，其他元素都变色”的效果。
3. 事件绑定: elDivs.forEach(el => { ... }); 循环为每个div元素分别绑定了mouseenter和mouseleave事件，当鼠标进入或离开该元素时，都会调用toggleClassDivs函数。

优点

• 高度灵活: 可以实现更复杂的逻辑，例如根据数据动态改变类名，或者触发其他JavaScript函数。
• 状态管理: 可以在JavaScript中管理元素的“活跃”状态，便于后续操作。
• 跨浏览器兼容性: Vanilla JavaScript通常具有良好的兼容性。

总结与选择建议

• 首选CSS方法: 对于简单的“悬停时改变非当前元素样式”的需求，纯CSS解决方案（利用.wrapper:hover div:not(:hover)）是最推荐的方式。它代码量少、性能高、易于理解和维护。
• JavaScript方法适用于复杂场景: 当你需要：
  • 根据更复杂的条件判断来添加/移除类。
  • 动态地决定要添加的类名。
  • 在悬停事件中触发其他JavaScript逻辑或API调用。
  • 处理大量元素，且CSS选择器可能变得过于复杂时（虽然在这种情况下JS也需优化）。

在实际开发中，应优先考虑使用CSS来处理样式和简单的交互，只有当CSS无法满足需求时，才引入JavaScript来增强交互逻辑。

以上就是深入理解：使用CSS和JavaScript实现悬停时对同组非当前元素添加样式的详细内容，更多请关注php中文网其它相关文章！