本教程探讨了两种实现特定前端交互效果的方法：当鼠标悬停在某个元素上时，为该元素的所有同级非当前元素动态添加或移除css类。文章详细介绍了纯css解决方案，利用`:hover`和`:not(:hover)`伪类组合实现简洁高效的样式切换，同时提供了基于vanilla javascript的事件监听和`classlist`操作方案，适用于更复杂的交互逻辑，并附带代码示例和注意事项。
需求概述：悬停时影响非当前同级元素
在网页开发中，我们经常需要实现各种动态交互效果。一个常见的需求是，当用户将鼠标悬停在某个特定元素上时，不仅要对该元素本身进行样式调整，还需要对其同级元素（或父元素、子元素等）进行相应的样式修改。本教程将聚焦于一种特殊场景：当鼠标悬停在一个元素上时，为其所有同级元素中除当前悬停元素以外的其他元素添加或移除一个特定的CSS类。例如，在一个包含多个div的容器中，当鼠标悬停在第二个div上时，希望第一个和第三个div获得新的样式。
方法一：纯CSS解决方案
对于上述需求，最优雅且性能最佳的解决方案往往是纯CSS实现。CSS提供了强大的伪类选择器，可以帮助我们精准地定位和样式化元素，而无需借助JavaScript。
核心原理
该方法利用了以下CSS特性：
- :hover`伪类：用于选择鼠标指针悬停在上面的元素。
- :not()伪类：用于排除符合特定选择器条件的元素。
- 后代选择器：父元素 子元素，用于选择作为父元素后代的子元素。
通过将这些选择器组合使用，我们可以实现当鼠标悬停在父容器上时，选择其所有子元素，然后排除掉当前鼠标悬停的子元素，从而对剩余的子元素应用样式。
立即学习“前端免费学习笔记（深入）”；
代码示例
假设我们有一个包含多个div的父容器，我们希望当鼠标悬停在父容器上时，其内部非当前悬停的div背景变为红色。
HTML 结构：
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>
CSS 样式：
.wrapper {
display: flex; /* 示例：使div横向排列 */
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.wrapper div {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border: 1px solid #aaa;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease; /* 添加过渡效果 */
}
/* 当鼠标悬停在 .wrapper 上时，选择其内部所有 div，但排除掉当前正在悬停的 div */
.wrapper:hover div:not(:hover) {
background-color: red; /* 为非当前悬停的 div 添加红色背景 */
color: white;
}优点与适用场景
- 简洁高效：代码量少，浏览器直接处理，性能极佳。
- 维护性高：样式与结构分离，易于理解和修改。
- 无需JavaScript：减少了JavaScript的复杂性和潜在的性能开销。
这种方法适用于纯粹的视觉样式切换，不涉及复杂的逻辑或状态管理。只要交互效果可以通过CSS选择器精确描述，纯CSS方案通常是首选。
方法二：JavaScript实现动态类名切换
在某些情况下，纯CSS可能无法满足所有需求，例如当需要根据更复杂的条件判断、与后端数据交互或执行其他非样式相关的操作时。这时，JavaScript就成为了实现动态交互的强大工具。
核心原理
JavaScript方案通常涉及以下步骤：
- 获取所有相关元素：通过DOM选择器获取需要参与交互的所有元素。
- 监听事件：为每个元素添加mouseenter（鼠标进入）和mouseleave（鼠标离开）事件监听器。
- 事件处理函数：在事件触发时执行逻辑，遍历所有相关元素，为它们添加或移除指定的CSS类，并确保当前悬停的元素被排除。
- classList API：使用Element.classList对象提供的add()和remove()方法来方便地操作元素的类名。
代码示例
我们将使用与CSS示例相同的HTML结构，并用JavaScript实现相同的悬停效果。
HTML 结构（与CSS示例相同）：
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>
CSS 样式（仅定义要添加的类）：
.wrapper {
display: flex;
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.wrapper div {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border: 1px solid #aaa;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
/* 定义要通过JS添加的类 */
.highlight {
background-color: red;
color: white;
}JavaScript 代码：
// 获取所有需要进行交互的 div 元素
const elDivs = document.querySelectorAll(".wrapper div");
/**
* 切换所有非当前悬停 div 的高亮类
* @param {Event} evt - 触发的事件对象
*/
const toggleClassDivs = (evt) => {
// 判断事件类型是 mouseenter 还是 mouseleave
const isEnter = evt.type === "mouseenter";
// 遍历所有 div 元素
elDivs.forEach(el => {
// 根据事件类型添加或移除 'highlight' 类
// 如果是 mouseenter，则添加类；如果是 mouseleave，则移除类
el.classList[isEnter ? "add" : "remove"]("highlight");
});
// 无论 mouseenter 还是 mouseleave，都确保当前悬停的元素没有 'highlight' 类
// 因为上面的循环会给所有元素添加/移除，所以这里需要特别处理当前元素
evt.currentTarget.classList.remove("highlight");
};
// 为每个 div 元素添加 mouseenter 和 mouseleave 事件监听器
elDivs.forEach(el => {
el.addEventListener("mouseenter", toggleClassDivs);
el.addEventListener("mouseleave", toggleClassDivs);
});逻辑解析
- document.querySelectorAll(".wrapper div")：获取父容器内所有div元素，并将它们存储在一个NodeList中。
- toggleClassDivs(evt)函数：
- const isEnter = evt.type === "mouseenter";：判断当前触发的事件是鼠标进入还是鼠标离开。
- elDivs.forEach(el => el.classList[isEnter ? "add" : "remove"]("highlight"));：这是关键一步。它遍历了所有div元素。
- 如果isEnter为真（mouseenter事件），则对所有div添加highlight类。
- 如果isEnter为假（mouseleave事件），则对所有div移除highlight类。
- evt.currentTarget.classList.remove("highlight");：evt.currentTarget指向当前触发事件的元素（即鼠标悬停或离开的那个div）。由于上一步已经对所有div进行了操作，这里需要明确将当前触发元素的highlight类移除，以满足“非当前元素”的需求。
- elDivs.forEach(el => { ... });：为每个div元素分别绑定mouseenter和mouseleave事件，当事件发生时，调用toggleClassDivs函数。
注意事项
- 事件委托：如果div元素数量非常多，或者它们是动态生成的，为每个元素单独添加事件监听器可能会影响性能。在这种情况下，可以考虑使用事件委托，将监听器添加到它们的共同父元素（例如.wrapper）上，并通过event.target来判断是哪个子元素触发了事件。
- 性能：对于简单的样式切换，CSS方案通常优于JavaScript。仅当CSS无法实现时才考虑JavaScript。
- 可访问性：确保使用JavaScript实现的交互在没有鼠标的情况下（例如键盘导航）也能正常工作，可能需要额外的键盘事件处理。
总结与选择
本教程展示了两种实现“悬停时为同级非当前元素动态添加/移除类名”的方法：
- 纯CSS方案：利用:hover和:not(:hover)伪类组合，代码简洁、性能优异，是实现纯视觉样式切换的首选。它适用于静态的HTML结构和明确的样式规则。
- JavaScript方案：通过事件监听和classList操作，提供了更大的灵活性和控制力，适用于需要结合复杂逻辑、数据交互或非样式操作的场景。
在实际开发中，我们应优先考虑使用纯CSS解决方案，因为它更符合“关注点分离”原则，并且由浏览器原生处理，性能更佳。只有当CSS无法满足需求时，才应转向JavaScript，并注意其可能带来的性能和复杂性开销。选择哪种方法取决于项目的具体需求、交互的复杂程度以及对性能和维护性的考量。
