CSS+JS问题：Overlay绑定onmouseout时子元素触发误判

问题出在mouseout事件的冒泡特性上：当鼠标从父元素（overlay）移到它的子元素上时，浏览器会判定你“离开”了父元素的直接触发区域，从而触发mouseout事件，导致overlay意外消失。

直接解决方案 #

把mouseout事件换成mouseleave事件——这个事件不会冒泡，只有当鼠标**完全离开整个元素（包括所有后代元素）**时才会触发。

代码修正示例 #

假设你原来的JS绑定是这样的：

// 原来的错误写法
overlay.onmouseout = function() {
  this.style.display = 'none';
};

改成：

// 修正后的写法
overlay.onmouseleave = function() {
  this.style.display = 'none';
};

如果用事件监听的方式，同样替换事件类型：

overlay.addEventListener('mouseleave', function() {
  this.classList.remove('active'); // 假设你用类来控制显示隐藏
});

完整可运行示例 #

<div class="box-container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="overlay">
    <h2>Overlay标题</h2>
    <p>这里是Overlay内的文本内容</p>
  </div>
</div>

<style>
.box-container {
  position: relative;
  width: 800px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.box {
  height: 200px;
  background: #e2e2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.box:hover {
  background: #ccc;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}
</style>

<script>
const boxes = document.querySelectorAll('.box');
const overlay = document.querySelector('.overlay');

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    overlay.classList.add('active');
  });
});

overlay.addEventListener('mouseleave', () => {
  overlay.classList.remove('active');
});
</script>

这样修改后，鼠标在overlay内部的任何子元素上移动时，都不会触发隐藏逻辑，只有当鼠标完全移出overlay的范围，才会让overlay消失。

内容的提问来源于stack exchange，提问作者Márton Stark