实现悬停时对非当前元素添加样式的教程：CSS与J*aScript方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

实现悬停时对非当前元素添加样式的教程：CSS与J*aScript方法

2025-12-08

浏览次数：次

返回列表

实现悬停时对非当前元素添加样式的教程：CSS与JavaScript方法

本教程探讨如何在用户悬停于一组元素中的某个特定元素时，为其同级非当前元素动态添加或移除css类。文章将详细介绍两种实现方法：一种是利用纯css的`:hover`和`:not(:hover)`伪类选择器，适用于简洁高效的场景；另一种是采用vanilla j*ascript结合`mouseenter`和`mousele*e`事件以及`classlist` api，提供更灵活的控制能力。通过对比两种方案，帮助开发者根据项目需求选择最合适的实现方式。

在Web开发中，我们经常需要实现复杂的交互效果，其中之一就是根据用户的鼠标悬停状态来动态改变元素的样式。本教程将深入探讨一个具体场景：当鼠标悬停在某个元素上时，为该元素所在容器内的其他（非当前悬停）元素添加或移除特定的CSS类。我们将提供两种实现方案：纯CSS方法和J*aScript方法，并分析它们的适用场景。

1. 纯CSS实现方案

对于许多UI交互，CSS本身就提供了强大且高效的能力。在这种特定需求下，我们可以巧妙地结合使用CSS的伪类选择器来达成目标，而无需编写任何J*aScript代码。这种方法的优势在于其简洁性、声明性以及由浏览器原生处理带来的性能优势。

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。

.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. J*aScript实现方案

虽然CSS方法简洁高效，但在某些情况下，我们可能需要更复杂的逻辑控制，或者需要在悬停事件中触发其他J*aScript行为。这时，使用J*aScript来动态添加和移除类就成为必要。

标贝悦读AI配音

在线文字转语音软件-专业的配音网站

78 查看详情标贝悦读AI配音

2.1 HTML结构

HTML结构与CSS方案相同，我们仍然使用一个wrapper容器和多个子div元素。

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

2.2 CSS样式

为了通过J*aScript控制样式，我们需要定义一个独立的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 J*aScript代码

J*aScript方案涉及监听每个子元素的mouseenter和mousele*e事件，并在事件触发时动态操作元素的classList。

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

/**
 * 根据事件类型切换所有非当前悬停div的CSS类
 * @param {Event} evt - 鼠标事件对象
 */
const toggleClassDivs = (evt) => {
  // 判断事件类型是mouseenter还是mousele*e
  const isEnter = evt.type === "mouseenter";

  // 遍历所有子div元素
  elDivs.forEach(el => {
    // 如果是mouseenter事件，则添加'red'类；如果是mousele*e事件，则移除'red'类
    // classList[isEnter ? "add" : "remove"]("red") 是一种简洁的写法
    el.classList[isEnter ? "add" : "remove"]("red");
  });

  // 特殊处理：将当前悬停的元素（evt.currentTarget）的'red'类移除
  // 确保悬停的元素本身不会变红
  evt.currentTarget.classList.remove("red");
};

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

2.4 工作原理

获取元素：document.querySelectorAll(".wrapper div") 获取了所有需要操作的子div元素，并将它们存储在一个NodeList中。
事件监听：通过forEach循环，为每个子div添加了mouseenter和mousele*e事件监听器。
- mouseenter：当鼠标指针进入元素时触发，不会像mouseover那样冒泡。
- mousele*e：当鼠标指针离开元素时触发，不会像mouseout那样冒泡。
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方案：适用于样式变化逻辑简单、无需与J*aScript交互的场景。它具有更好的性能、更简洁的代码和更易于维护的优势。如果需求仅限于视觉样式变化，优先考虑CSS。
- J*aScript方案：提供更强大的灵活性和控制力。当悬停事件需要触发复杂的业务逻辑、动画序列、数据请求或其他J*aScript功能时，JS方案是不可或缺的。
性能考量：对于大量的元素，CSS方案通常性能更优，因为它直接由浏览器渲染引擎处理。J*aScript方案会涉及DOM操作和事件处理，可能在极端情况下对性能产生轻微影响，但对于大多数常见的UI场景来说，这种影响微乎其微。
可维护性：CSS方案将样式和行为紧密结合，但对于简单的视觉效果，这种结合是清晰的。J*aScript方案将行为逻辑从样式中分离，提高了模块化程度，但增加了代码量。
事件委托：在J*aScript方案中，如果子元素数量非常多且动态变化，可以考虑使用事件委托（将事件监听器绑定到父容器上，然后通过event.target判断具体是哪个子元素触发了事件）来优化性能，减少事件监听器的数量。然而，在本例中，直接为每个子元素添加监听器已足够高效。