Popup文本框hover变色时闪烁 多触发Div仅首个生效问题求助

问题原因与解决方案 #

1. 仅第一个Div能触发Popup的问题 #

原因：HTML中ID是唯一标识，getElementById只会返回第一个匹配元素，后续同名ID的元素无法绑定事件。
解决：将触发元素的id="trigger"改为class="trigger"，通过document.querySelectorAll获取所有触发元素，循环绑定事件。

2. Popup闪烁问题 #

原因：使用mouseover/mouseout时，鼠标移到Popup上会触发trigger的mouseout（Popup不在trigger的DOM层级内），导致Popup消失；Popup消失后鼠标回到trigger区域，又触发mouseover重新显示，循环造成闪烁。CSS过渡的重绘也可能加剧事件误判。
解决：

• 替换mouseover/mouseout为mouseenter/mouseleave：这两个事件仅在鼠标真正进入/离开元素边界时触发，不会因外部元素干扰触发。
• 可选优化：给Popup添加pointer-events: none（无需交互Popup时），让鼠标事件穿透Popup，此时鼠标在Popup上仍视为在trigger上，避免触发mouseleave。

修改后的完整代码 #

HTML #

<div class="trigger"></div>
<div class="trigger" style="background-color: aqua;"></div>
<div class="trigger" style="background-color: brown;"></div>
<div id="popup"><p id="popup-text"></p></div>

CSS #

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 20px;
  width: 200px;
  /* 可选：无需交互Popup时添加，防止事件干扰 */
  /* pointer-events: none; */
}

.trigger {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: 10px 0; /* 添加间距方便测试 */
}

.trigger:hover {
  background-color: green;
  transition: 0.6s;
}

JavaScript #

const triggers = document.querySelectorAll(".trigger");
const popup = document.getElementById("popup");
const text = document.getElementById("popup-text");

text.innerHTML = "This is the pop-up text.";

// 给每个触发元素绑定事件
triggers.forEach(trigger => {
  trigger.addEventListener("mouseenter", function(event) {
    popup.style.display = "block";
    // 调整Popup位置，避免覆盖trigger（进一步减少闪烁概率）
    popup.style.left = (event.clientX + 10) + "px";
    popup.style.top = (event.clientY + 10) + "px";
  });

  trigger.addEventListener("mouseleave", function() {
    popup.style.display = "none";
  });
});

额外说明 #

• 给trigger添加margin是为了分隔元素，方便测试hover效果。
• 调整Popup位置（+10px）是为了避免直接覆盖trigger，减少鼠标切换区域时的事件触发概率。
• 若需Popup支持交互（如点击关闭），不要添加pointer-events: none，建议将Popup设为trigger的子元素，或在mouseleave时判断鼠标是否在Popup区域内再决定是否隐藏。

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