javascript 当光标移到工具提示上时如何保持悬停效果?

t30tvxxf  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(146)

我有一个当鼠标悬停在div上时弹出的弹出表单。当我悬停在div上时,会出现一个表单,当我开始键入用户名或密码时,浏览器会提供此站点数据的保存版本作为工具提示。当我悬停在此选项上时,表单会消失。我该如何解决此问题?

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

$(".popup-form").on("mouseleave", function() {
  $(".open-popup-btn").removeClass("active");
})
.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;
}
<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>
41zrol4v

41zrol4v1#

您可以使用隐藏的复选框;总的来说,这是一种比悬停更安全、更好的方式,而且甚至不需要JavaScript。

#open-checkbox {
  display: none;
}

#open-checkbox:checked + .popup-form {
  display: block;
}

试试看:
x一个一个一个一个x一个一个二个x

相关问题