MouseOverとMouseOutの使用

Question

こんにちは、私の最初のウェブサイトに取り組んでいて、jqueryを使ってスライドメニューを実装しようとしています。

これは、これまでに得たものである：

  <a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a> 
     <script type="text/javascript"> 
     function ShowBox() 
     { 
      $("#SlideMenu").slideDown(); 
     } 
     function HideBox() 
     { 
      $("#SlideMenu").slideUp(); 
     } 
     </script> 

私は私のメニューが滑り落ちるが、自動的にバックスライドコントロールをマウスオーバーすると。 私が望むのは、メニューから選択してオプションを選択する時間をユーザに与え、そうでなければ、マウスがコントロールから離れるとすぐにメニューを閉じることです。

これはなぜ機能しないのでしょうか？ ありがとうございます。

Answer 1

はインラインJSせずに自分のものを実行して、<a>要素を閉じて、

<a id="test">Show box</a> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#test").on({ 
      mouseenter: function() { 
      $("#SlideMenu").slideDown(); 
      }, 
      mouseleave: function() { 
      $("#SlideMenu").slideUp(); 
      }, 
      click: function(e) { 
      e.preventDefault(); 
      } 
     }); 
    }); 
</script> 

FIDDLE

Answer 2

あなたはjQueryのを使用している場合、これはそれについて移動する適切な方法のようになります。

<a href="#" id="showBoxHref">Show box</a> 

<script type="text/javascript"> 
    $("#showBoxHref").hover(function() { 
     $(this).slideDown(); 
    }, function() { 
     $(this).slideUp(); 
    }); 
</script> 

（単にコピー/この中に貼り付け、それが動作するはずです）

Answer 3

あなたはjQueryのを使用しているとマウスがメニュー上にある一方で、メニューが開位置にとどまるだろうということですこれが意味する何

$("#box").hover(
    function() { 
     //.stop() to prevent propagation 
     $(this).stop().animate({"bottom": "200px"}, "fast");     
    }, 
    function() { 
     $(this).stop().animate({"bottom": "0px"}, "fast");     
    } 
); 

：私はあなたに似たものを使用することが有益であると考えています。マウスがメニューを終了すると、終了します。明らかにあなたのニーズに合わせてidとアニメーションCSSの値を変更してください:)！ここで

は実施例である： http://jsfiddle.net/V3PYs/1/

Answer 4

レディ機能を使用することを忘れないでください本当にここに問題はありません。スクリプトはあなたが言ったことを正確に行っています。しかし、私が理解しているところでは、はが "trigger"要素を残したときに開いているメニューのためのものですユーザーのマウスがメニュー上にある場合。これを試してみてください：

このようにして、トリガー要素からマウスを離してメニューに移動した後、ユーザーはしばらくしています。タイムアウトを試す必要があるかもしれませんが、これはうまくいくはずです。私はこれをテストし、それは働いているようだ。必要な場合は、$(document).readyにすべての要素がロードされ準備が整っていることを確認してください。

デモ：http://www.dstrout.net/pub/menu.htm