本教程探讨如何在用户悬停于一组元素中的某个特定元素时，为其同级非当前元素动态添加或移除css类。文章将详细介绍两种实现方法：一种是利用纯css的`:hover`和`:not(:hover)`伪类选择器，适用于简洁高效的场景；另一种是采用vanilla javascript结合`mouseenter`和`mouseleave`事件以及`classlist` api，提供更灵活的控制能力。通过对比两种方案，帮助开发者根据项目需求选择最合适的实现方式。
在Web开发中，我们经常需要实现复杂的交互效果，其中之一就是根据用户的鼠标悬停状态来动态改变元素的样式。本教程将深入探讨一个具体场景：当鼠标悬停在某个元素上时，为该元素所在容器内的其他（非当前悬停）元素添加或移除特定的CSS类。我们将提供两种实现方案：纯CSS方法和javaScript方法，并分析它们的适用场景。
1. 纯CSS实现方案
对于许多ui交互，CSS本身就提供了强大且高效的能力。在这种特定需求下，我们可以巧妙地结合使用CSS的伪类选择器来达成目标，而无需编写任何javascript代码。这种方法的优势在于其简洁性、声明性以及由浏览器原生处理带来的性能优势。
1.1 html结构
首先，我们需要一个包含多个子元素的父容器。这里，我们使用一个div作为wrapper，其中包含三个子div元素。
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>1.2 css样式
核心在于利用:hover伪类作用于父容器，然后结合:not(:hover)伪类作用于子元素。当鼠标悬停在.wrapper上时，我们希望所有子div都应用一个基础样式，但排除当前鼠标悬停的那个div。
立即学习“Java免费学习笔记（深入）”；
.wrapper:hover div:not(:hover) { background: red; /* 当鼠标悬停在父容器上，且子元素不是当前悬停元素时，应用红色背景 */ color: white; /* 可选：文字颜色 */ } /* 基础样式，使div可见 */ .wrapper { display: flex; gap: 10px; padding: 20px; border: 1px solid #ccc; } .wrapper div { width: 50px; height: 50px; background: #f0f0f0; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; transition: background 0.3s ease; /* 添加过渡效果，使样式变化更平滑 */ }1.3 工作原理
- .wrapper:hover：这个部分确保只有当鼠标悬停在整个.wrapper容器上时，后续的样式规则才会被激活。
- div:not(:hover)：在.wrapper:hover的上下文中，这个选择器会选中所有是div且当前没有被鼠标悬停的元素。
- 将两者结合，wrapper:hover div:not(:hover)精确地定位了当鼠标在父容器内移动，但不在某个特定子div上时，应该被应用样式的那些子div。
这种方法非常高效且易于理解，适用于样式变化相对简单，且不需要复杂逻辑判断的场景。
2. JavaScript实现方案
虽然CSS方法简洁高效，但在某些情况下，我们可能需要更复杂的逻辑控制，或者需要在悬停事件中触发其他JavaScript行为。这时，使用JavaScript来动态添加和移除类就成为必要。
2.1 HTML结构
HTML结构与CSS方案相同，我们仍然使用一个wrapper容器和多个子div元素。
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>2.2 CSS样式
为了通过JavaScript控制样式，我们需要定义一个独立的CSS类，该类包含我们希望在悬停时应用的样式。
.red { background: red; color: white; } /* 基础样式，与CSS方案相同 */ .wrapper { display: flex; gap: 10px; padding: 20px; border: 1px solid #ccc; } .wrapper div { width: 50px; height: 50px; background: #f0f0f0; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; transition: background 0.3s ease; /* 添加过渡效果 */ }2.3 JavaScript代码
JavaScript方案涉及监听每个子元素的mouseenter和mouseleave事件，并在事件触发时动态操作元素的classlist。
// 获取所有子div元素 const elDivs = document.querySelectorAll(".wrapper div"); /** * 根据事件类型切换所有非当前悬停div的CSS类 * @param {Event} evt - 鼠标事件对象 */ const toggleClassDivs = (evt) => { // 判断事件类型是mouseenter还是mouseleave const isEnter = evt.type === "mouseenter"; // 遍历所有子div元素 elDivs.foreach(el => { // 如果是mouseenter事件，则添加'red'类；如果是mouseleave事件，则移除'red'类 // classList[isEnter ? "add" : "remove"]("red") 是一种简洁的写法 el.classList[isEnter ? "add" : "remove"]("red"); }); // 特殊处理：将当前悬停的元素（evt.currentTarget）的'red'类移除 // 确保悬停的元素本身不会变红 evt.currentTarget.classList.remove("red"); }; // 为每个子div元素添加mouseenter和mouseleave事件监听器 elDivs.forEach(el => { el.addEventListener("mouseenter", toggleClassDivs); el.addEventListener("mouseleave", toggleClassDivs); });2.4 工作原理
- 获取元素：document.querySelectorAll(“.wrapper div”) 获取了所有需要操作的子div元素，并将它们存储在一个nodeList中。
- 事件监听：通过forEach循环，为每个子div添加了mouseenter和mouseleave事件监听器。
- toggleClassDivs函数：
- isEnter变量根据事件类型判断当前是进入还是离开。
- 内部的forEach循环遍历所有子div。
- el.classList[isEnter ? “add” : “remove”](“red”)：这是一个巧妙的写法，根据isEnter的值动态调用classList.add()或classList.remove()方法，为所有子div添加或移除red类。
- evt.currentTarget.classList.remove(“red”)：这是关键一步。在所有子div都被处理后，我们单独将当前鼠标悬停的那个元素（evt.currentTarget指向事件监听器所绑定的元素）的red类移除，从而实现了“非当前悬停元素变色”的效果。
3. 总结与注意事项
- 选择合适的方案：
- 纯CSS方案：适用于样式变化逻辑简单、无需与JavaScript交互的场景。它具有更好的性能、更简洁的代码和更易于维护的优势。如果需求仅限于视觉样式变化，优先考虑CSS。
- JavaScript方案：提供更强大的灵活性和控制力。当悬停事件需要触发复杂的业务逻辑、动画序列、数据请求或其他JavaScript功能时，js方案是不可或缺的。
- 性能考量：对于大量的元素，CSS方案通常性能更优，因为它直接由浏览器渲染引擎处理。JavaScript方案会涉及dom操作和事件处理，可能在极端情况下对性能产生轻微影响，但对于大多数常见的UI场景来说，这种影响微乎其微。
- 可维护性：CSS方案将样式和行为紧密结合，但对于简单的视觉效果，这种结合是清晰的。JavaScript方案将行为逻辑从样式中分离，提高了模块化程度，但增加了代码量。
- 事件委托：在JavaScript方案中，如果子元素数量非常多且动态变化，可以考虑使用事件委托（将事件监听器绑定到父容器上，然后通过event.target判断具体是哪个子元素触发了事件）来优化性能，减少事件监听器的数量。然而，在本例中，直接为每个子元素添加监听器已足够高效。
通过本教程，您应该能够根据实际需求，灵活选择并实现当鼠标悬停于一个元素时，为其同级非当前元素添加或移除样式的交互效果。