如何在鼠标悬停浏览器tooltip时保持弹窗表单的hover效果？

我实现了一个鼠标悬停div时弹出的弹窗表单：悬停该div时表单显示；但在输入用户名或密码时，浏览器会弹出该站点已保存的数据提示框，当鼠标悬停此选项时表单消失。请问如何解决该问题？

现有代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="open-popup-btn">
  OPEN
  <div class="popup-form">
    <form>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

CSS #

.open-popup-btn {
  position: relative;
  width: 200px;
}

.popup-form {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  top: 50px;
}

.open-popup-btn.active .popup-form {
  display: block;
}

JavaScript #

$(".open-popup-btn").on("mouseenter", function() {
  $(this).addClass("active");
})

$(".popup-form").on("mouseleave", function() {
  $(".open-popup-btn").removeClass("active");
})

解决方案 #

这个问题的核心是：浏览器的自动填充提示框不属于页面DOM元素，当鼠标移到上面时，会触发popup-form的mouseleave事件，导致表单被隐藏。以下是几种可行的解决方法：

方法1：调整事件监听逻辑（推荐） #

把事件监听从popup-form的mouseleave改成父容器open-popup-btn的mouseleave，同时判断鼠标离开的目标是否仍在弹窗或父容器范围内，只有当完全离开时才隐藏表单：

$(".open-popup-btn").on("mouseenter", function() {
  $(this).addClass("active");
});

$(".open-popup-btn").on("mouseleave", function(e) {
  const relatedTarget = e.relatedTarget;
  // 检查鼠标是否还在父容器或弹窗内部
  if (!$(this).has(relatedTarget).length && !$(relatedTarget).is(this)) {
    $(this).removeClass("active");
  }
});

方法2：禁用浏览器自动填充（如果业务允许） #

给输入框添加属性，阻止浏览器弹出自动填充提示：

<input type="text" autocomplete="off" />
<input type="password" autocomplete="new-password" />

说明：部分浏览器对autocomplete="off"支持有限，autocomplete="new-password"对密码框的禁用效果更稳定。

方法3：优化CSS交互（辅助方案） #

确保弹窗表单能正确接收鼠标事件，避免事件穿透：

.popup-form {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  top: 50px;
  pointer-events: auto;
}

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