求助：Chrome密码建议框导致登录表单隐藏的解决方法（保留密码建议）

方法1：调整hover触发的容器范围（推荐） #

把登录图标和表单放在同一个父容器内，给父容器绑定hover状态，这样只要鼠标停留在父容器（包含图标、表单，甚至Chrome的密码建议列表）范围内，表单就会保持显示状态。

示例代码：

<div class="login-wrapper">
  <i class="login-trigger-icon">🔑</i>
  <form class="login-form">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</div>

.login-form {
  display: none;
  position: absolute;
  margin-top: 8px;
  /* 其他表单样式 */
}
.login-wrapper:hover .login-form {
  display: block;
}

方法2：给表单隐藏操作加延迟 #

如果不想修改DOM结构，可以通过JS给表单隐藏逻辑加短暂延迟，同时监听鼠标是否重新进入表单/图标区域来取消延迟，避免误触发隐藏。

示例代码：

let hideTimer;
const triggerIcon = document.querySelector('.login-trigger-icon');
const loginForm = document.querySelector('.login-form');

// 显示表单
triggerIcon.addEventListener('mouseover', () => {
  clearTimeout(hideTimer);
  loginForm.style.display = 'block';
});

// 鼠标停留在表单时取消隐藏
loginForm.addEventListener('mouseover', () => {
  clearTimeout(hideTimer);
});

// 延迟隐藏表单
function setupHideTrigger(element) {
  element.addEventListener('mouseout', () => {
    hideTimer = setTimeout(() => {
      loginForm.style.display = 'none';
    }, 200); // 200ms延迟可根据需求调整
  });
}

setupHideTrigger(triggerIcon);
setupHideTrigger(loginForm);

方法3：修改表单触发逻辑为点击切换 #

如果hover逻辑不是必须的，可以改成点击图标切换表单的显示/隐藏状态，彻底避免鼠标移出触发的问题：

const triggerIcon = document.querySelector('.login-trigger-icon');
const loginForm = document.querySelector('.login-form');

triggerIcon.addEventListener('click', () => {
  loginForm.style.display = loginForm.style.display === 'block' ? 'none' : 'block';
});

// 点击页面其他区域隐藏表单
document.addEventListener('click', (e) => {
  if (!triggerIcon.contains(e.target) && !loginForm.contains(e.target)) {
    loginForm.style.display = 'none';
  }
});

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