Mouseover事件闪烁不稳定问题排查求助

问题根源 #

当鼠标悬停在#text上显示banner时，banner会占据鼠标移动的区域（或直接覆盖在#text上方），导致鼠标瞬间触发#text的mouseout事件，banner隐藏；随后鼠标重新回到#text，再次触发mouseover，循环往复就造成了闪烁。

解决方案 #

方案1：替换事件类型（最推荐）

使用mouseenter和mouseleave替代mouseover/mouseout。这两个事件不会因为相邻元素或子元素的干扰触发，仅针对绑定元素本身的进入/离开动作。

修改后的JS代码：

const text = document.getElementById("text");
const banner = document.getElementById("banner");

text.addEventListener("mouseenter", over);
text.addEventListener("mouseleave", out);

function over() {
  banner.style.display = "block";
}

function out() {
  banner.style.display = "none";
}

方案2：调整布局避免遮挡

通过CSS让banner不会出现在#text的鼠标路径范围内，同时确保banner初始状态为隐藏：

修改后的CSS：

h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  /* 默认隐藏banner */
  display: none;
  /* 让banner在text下方显示，避免覆盖触发区域 */
  margin-top: 20px;
}

#text {
  color: blueviolet;
  width: 250px;
  margin: 0;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px; /* 修复原代码的单引号错误 */
}

方案3：父容器统一绑定事件

将#text和#banner放入同一个父容器，给父容器绑定事件，这样鼠标在容器内的任何区域（包括banner）都不会触发离开事件：

修改后的HTML：

<div class="hover-container">
  <h1 id="banner" style="display:none;">Welcome to IT202</h1>
  <p>
    <strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong>
  </p>
  <p1 id="text">Show Welcome</p1>
</div>

修改后的JS：

const container = document.querySelector(".hover-container");
const banner = document.getElementById("banner");

container.addEventListener("mouseenter", over);
container.addEventListener("mouseleave", out);

function over() {
  banner.style.display = "block";
}

function out() {
  banner.style.display = "none";
}

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