鼠标悬停.content元素时切换#caption与#switch显示的问题求助

看起来你碰到了两个典型的前端小坑：事件绑定的目标没选对导致逻辑失效，还有元素布局流差异引发的突兀移位。咱们一步步来把问题解决掉：

问题根源拆解 #

1. 事件绑定逻辑偏差：你把mouseover绑在了#caption上、mouseout绑在了#switch上——这意味着只有鼠标直接悬停在#caption上才会触发切换，而且鼠标一离开#switch就会立刻恢复显示#caption，但你实际需要的是悬停在整个.content区域内时都保持#switch显示。
2. 布局移位的本质：#caption是<a>标签（默认行内元素），#switch是<div>（默认块级元素），两者在文档流中占据的空间、布局规则完全不同，切换display属性时必然会打乱原有布局，导致移位。

完整修复方案 #

1. 修正事件绑定逻辑 #

把事件监听直接绑定到.content元素上，使用mouseenter和mouseleave事件（这两个事件不会像mouseover/mouseout那样因为子元素冒泡触发不必要的切换）：

// 先获取元素
const contentBox = document.querySelector('.content');
const captionEl = document.getElementById('caption');
const switchEl = document.getElementById('switch'); // 避开JS关键字"switch"，避免混淆

// 绑定悬停进入事件
contentBox.addEventListener('mouseenter', () => {
  captionEl.style.display = 'none';
  switchEl.style.display = 'block';
});

// 绑定悬停离开事件
contentBox.addEventListener('mouseleave', () => {
  switchEl.style.display = 'none';
  captionEl.style.display = 'block';
});

2. 修复布局移位问题 #

通过定位让#caption和#switch重叠在同一个位置，这样切换时不会改变文档流，自然就不会移位了：

body { margin: 50px; }
.content {
  height: 500px;
  width: 100%;
  border: 3px solid black;
  position: relative; /* 为子元素的绝对定位提供参考坐标系 */
}
#caption {
  font-size: 3em;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0; /* 清除默认边距避免错位 */
}
#switch {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 85%; /* 可选，限制宽度避免超出容器 */
  margin: 0;
}

3. 保持原HTML结构即可 #

<div class="content">
  <a id="caption">Lorem Ipsum</a>
  <div id="switch">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare libero et vestibulum pellentesque. In accumsan et est dapibus viverra.</p>
  </div>
</div>

额外优化小技巧 #

其实这个需求完全可以用纯CSS实现，代码更简洁高效，不需要JavaScript：

/* 悬停在.content上时隐藏caption、显示switch */
.content:hover #caption { display: none; }
.content:hover #switch { display: block; }

只需要保留上面的布局CSS，加上这两行就能实现相同效果，更适合这种简单的交互场景。

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