如何优化JavaScript实现鼠标进出不同盒子时切换显示对应内容？

嘿，很高兴看到你已经搞定了这个悬停显示/隐藏的功能！确实，一开始写的时候很容易陷入重复绑定事件的误区，其实我们可以用更聪明的方式来简化代码，让它更简洁也更好维护。下面给你几个实用的优化方案：

方案一：数据属性+事件委托（最灵活） #

这种方式通过HTML的data-*属性把盒子和对应内容关联起来，再利用事件委托只绑定一次事件，不管你加多少个盒子都不用改JS代码。

HTML结构 #

<!-- 给每个盒子加data-target属性，值对应内容的ID -->
<div class="hover-box" data-target="content1">盒子1</div>
<div class="hover-box" data-target="content2">盒子2</div>

<!-- 对应内容元素 -->
<div id="content1" class="hover-content">内容1</div>
<div id="content2" class="hover-content">内容2</div>

JavaScript代码 #

// 选一个所有hover-box的父容器（比如body，或者更具体的父元素）
const container = document.body;

// 统一处理鼠标进入事件
container.addEventListener('mouseenter', (e) => {
  // 判断触发事件的是不是我们的hover盒子
  if (e.target.classList.contains('hover-box')) {
    const targetId = e.target.dataset.target;
    document.getElementById(targetId).style.display = 'block';
  }
});

// 统一处理鼠标离开事件
container.addEventListener('mouseleave', (e) => {
  if (e.target.classList.contains('hover-box')) {
    const targetId = e.target.dataset.target;
    document.getElementById(targetId).style.display = 'none';
  }
});

方案二：类名切换+CSS控制（推荐，样式逻辑分离） #

把显示隐藏的样式交给CSS处理，JS只负责切换类名，这样后期调整样式（比如改成渐变显示）直接改CSS就行，不用动JS。

HTML结构 #

和方案一一样，用data-target关联盒子和内容：

<div class="hover-box" data-target="content1">盒子1</div>
<div class="hover-box" data-target="content2">盒子2</div>

<div id="content1" class="hover-content">内容1</div>
<div id="content2" class="hover-content">内容2</div>

CSS代码 #

/* 默认隐藏内容 */
.hover-content {
  display: none;
  transition: opacity 0.3s;
  opacity: 0;
}
/* 加active类时显示 */
.hover-content.active {
  display: block;
  opacity: 1;
}

JavaScript代码 #

const container = document.body;
// 记录当前显示的内容，避免重复操作
let currentActiveContent = null;

container.addEventListener('mouseenter', (e) => {
  if (e.target.classList.contains('hover-box')) {
    // 先隐藏之前显示的内容
    if (currentActiveContent) {
      currentActiveContent.classList.remove('active');
    }
    // 显示当前对应内容
    const targetId = e.target.dataset.target;
    currentActiveContent = document.getElementById(targetId);
    currentActiveContent.classList.add('active');
  }
});

container.addEventListener('mouseleave', (e) => {
  if (e.target.classList.contains('hover-box') && currentActiveContent) {
    currentActiveContent.classList.remove('active');
    currentActiveContent = null;
  }
});

方案三：纯CSS实现（无JS，适合结构允许的场景） #

如果你的盒子和对应内容是父子或兄弟关系，完全可以不用JS，靠CSS的:hover伪类实现，代码最精简，性能也最好。

HTML结构 #

<!-- 把盒子和内容放在同一个父容器里 -->
<div class="hover-wrapper">
  <div class="hover-box">盒子1</div>
  <div class="hover-content">内容1</div>
</div>
<div class="hover-wrapper">
  <div class="hover-box">盒子2</div>
  <div class="hover-content">内容2</div>
</div>

CSS代码 #

.hover-content {
  display: none;
}
/* 鼠标悬停父容器时，显示里面的内容 */
.hover-wrapper:hover .hover-content {
  display: block;
}

你可以根据自己的HTML结构和需求选择最合适的方案，这样代码会精简很多，后期维护也更省心～

内容的提问来源于stack exchange，提问作者Adam Tolaini