我有一个当鼠标悬停在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>
1条答案
按热度按时间41zrol4v1#
您可以使用隐藏的复选框;总的来说,这是一种比悬停更安全、更好的方式,而且甚至不需要JavaScript。
试试看:
x一个一个一个一个x一个一个二个x