本教程探讨如何实现当鼠标悬停在一组元素中的某个元素上时，为该组中除当前悬停元素之外的其他元素添加或移除特定样式。文章将详细介绍两种主要实现方式：纯css解决方案，利用父级`:hover`和子级`:not(:hover)`伪类组合；以及基于vanilla javascript的事件监听和`classlist`操作。通过具体代码示例和解析，帮助开发者根据项目需求选择最合适的交互实现方案。
在前端开发中，我们经常需要实现复杂的交互效果。其中一个常见的需求是，当用户鼠标悬停在一组元素中的某个特定元素上时，不是改变当前元素的样式，而是改变同组中其他非悬停元素的样式。例如，在一个列表或卡片组中，当鼠标悬停在第二项时，希望第一项和第三项的背景色发生变化。本文将详细介绍两种实现这种效果的专业方法。
方法一：纯CSS实现（推荐）
对于大多数此类需求，纯CSS解决方案是首选，因为它更简洁、性能更好，并且不需要额外的JavaScript代码。这种方法的核心在于利用CSS的伪类选择器组合：父元素的:hover状态与子元素的:not(:hover)状态。
实现原理
- 外部容器的:hover: 当鼠标悬停在包含所有子元素的父容器上时，表示整个组处于“活跃”状态。
- 子元素的: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提供了更高的灵活性和控制力。
实现原理
- 事件监听: 为每个子元素添加mouseenter和mouseleave事件监听器。
- 状态判断: 在事件触发时，判断是鼠标进入 (mouseenter) 还是鼠标离开 (mouseleave)。
- 遍历与操作: 遍历所有子元素，为除当前触发事件的元素之外的其他元素添加或移除指定类。
示例代码
我们将使用Vanilla JavaScript来操作DOM。
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);
});解析
- document.querySelectorAll(".wrapper div"): 选取所有.wrapper容器内的div元素，并将它们存储在一个NodeList中。
-
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类移除。这样就实现了“除了当前元素，其他元素都变色”的效果。
- 事件绑定: 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来增强交互逻辑。
