0

我想在鼠标悬停时取消隐藏 div 吗？

目前，在我的代码中（见下文）。悬停链接时，将打开一个高级搜索表单。当用户从 url 移动鼠标时，打开的表单正在关闭。我希望只有当用户为表单移动鼠标时表单才会关闭。

请提出解决方案。

          <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

4 回答 4

1

试试这个，

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

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

http://jsfiddle.net/AHVR9/

于 2012-09-14T07:00:20.283 回答
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()

于 2012-09-14T06:43:35.523 回答
0

检查这个工作演示，虽然我稍微调整了你的代码

$("a").hover(function () {
            $("#searchfrm").show();
});

$("#searchfrm").mouseleave(function(){
    $("#searchfrm").hide();
});

更新添加关闭按钮演示

第二次更新演示

于 2012-09-14T06:46:03.093 回答
0

试试这个

 $("a").mouseover(function() {
     $("div").toggle("slow");
 });
$("div").mouseleave(function(){
  $(this).hide("slow");
});
于 2012-09-14T06:47:04.973 回答