鼠标悬停/移出时遮罩层淡入淡出异常问题求助

你遇到的问题本质是文本元素捕获了鼠标事件，导致浏览器误判鼠标离开了外层盒子。下面提供两种针对性解决方法：

方法一：CSS快速解决（无需JS） #

如果你的文本不需要响应鼠标交互（比如点击、选中），直接给文本元素设置pointer-events: none;，让鼠标事件穿透文本，直接作用于外层盒子。这样无论鼠标在图片还是文本上，都会被判定为悬停在盒子上。

示例代码：

<div class="box">
  <img src="your-image.jpg" alt="图片">
  <div class="mask"></div>
  <div class="text">高亮文本</div>
</div>

.box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  transition: opacity 0.3s ease;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 2;
  pointer-events: none; /* 关键：让鼠标事件穿透文本 */
}

.box:hover .mask {
  opacity: 0;
}

方法二：JavaScript精确控制（保留文本交互） #

如果文本需要保留鼠标交互（比如可点击、可选中），就用JS监听外层盒子的mouseenter和mouseleave事件，在mouseleave时判断鼠标是否真的离开了盒子范围：

示例代码：

<div class="box">
  <img src="your-image.jpg" alt="图片">
  <div class="mask"></div>
  <div class="text">可点击的高亮文本</div>
</div>

/* 基础样式和方法一一致，去掉.text的pointer-events: none */
.box {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  transition: opacity 0.3s ease;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 2;
}

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    box.querySelector('.mask').style.opacity = '0';
  });

  box.addEventListener('mouseleave', (e) => {
    // 检查鼠标是否移到了盒子的子元素上
    if (!box.contains(e.relatedTarget)) {
      box.querySelector('.mask').style.opacity = '1';
    }
  });
});

核心逻辑：e.relatedTarget是鼠标离开当前元素后进入的元素，用box.contains()判断这个元素是否属于盒子的后代，如果是，就不执行mask淡入的操作。

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