如何使用jquery取消隐藏鼠标上的活动div

时间:2012-09-14 06:37:35

标签: jquery html

我想在鼠标上取消隐藏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"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Search"/>
              </div>
            <script>
            $("a").hover(function () {
            $("div").toggle("slow");
            });
            </script>

            </body>
            </html>

4 个答案:

答案 0 :(得分:1)

试试这个,

$("a").mouseover(function() {
    $("div").show("slow");
});

$("div").mouseleave(function(){
    $(this).hide();
});
​

http://jsfiddle.net/AHVR9/

答案 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。

参考jQuery.mouseleave()

答案 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");
});