我想在鼠标上取消隐藏div?
目前,在我的代码中(见下文)。在链接悬停时,会打开一个advace搜索表单。当用户从网址移动鼠标时,打开的表单就会关闭。我希望只有当用户移动鼠标才能使表单关闭。
请为此建议解决方案。
<html>
<head>
<style>
div { background:#dad;
font-weight:bold;
font-size:16px;
width: 400px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="">Do advance Search</a>
<div style="display: none">
<h2>Advance Search Form:</h2>
<form action="search.php"><br/>
<input type="text" name="isbn" placeholder="Enter Isbn"/><br/>
<input type="text" name="isbn" placeholder=" Title "/><br/>
<input type="text" name="isbn" placeholder="Enter Author First Name"/><br/>
<input type="text" name="isbn" placeholder="Enter author last name"/><br/>
<input type="text" name="isbn" placeholder="Enter Isbn"/>
<input type="submit" value="Search"/>
</div>
<script>
$("a").hover(function () {
$("div").toggle("slow");
});
</script>
</body>
</html>
答案 0 :(得分:1)
试试这个,
$("a").mouseover(function() {
$("div").show("slow");
});
$("div").mouseleave(function(){
$(this).hide();
});
答案 1 :(得分:0)
为了便于在脚本中引用,请更改:
<div style="display: none">
要
<div id="theForm" style="display:none">
并将您的脚本更新为:
$("a").hover(function () {
$("#theForm").show("slow");
});
$("#theForm").mouseleave(function(){
$(this).hide("slow");
});
当鼠标离开它时,这将使它切换掉div。
答案 2 :(得分:0)
检查此 working demo ,虽然我稍微调整了您的代码
$("a").hover(function () {
$("#searchfrm").show();
});
$("#searchfrm").mouseleave(function(){
$("#searchfrm").hide();
});
已更新,可添加关闭按钮 Demo
第二次更新demo
答案 3 :(得分:0)
试试这个
$("a").mouseover(function() {
$("div").toggle("slow");
});
$("div").mouseleave(function(){
$(this).hide("slow");
});