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();
});

閉じるボタンのデモを追加するために更新

2回目の更新デモ

于 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 に答える