使用MouseOver和MouseOut

嗨，我正在使用我的第一個網站，並試圖使用jquery實現滑動菜單。使用MouseOver和MouseOut

這是一個有這麼遠：

  <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>

當我將鼠標懸停在控制我的菜單下滑，但自動滑入了。我想讓用戶有時間從菜單中選擇和選擇，如果他沒有，我希望鼠標離開控件後立即關閉菜單。

任何想法，爲什麼這不工作？在此先感謝。

來源

2012-05-09 phadaphunk

當你讓你的鼠標是什麼做的或懸停的元素？它會給出錯誤嗎？ –

不，它只是作爲如果鼠標遠離控制，雖然我根本沒有鼠標 – phadaphunk

做你的東西，而內聯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

來源

2012-05-09 00:27:13 adeneo

只是改變了我的代碼爲此，但我沒有得到任何效果了。只是一個展示盒標籤 – phadaphunk

@PhaDaPhunk - 添加了一個小提琴來展示它的工作原理，那是你在做什麼之後？ – adeneo

完美演繹小提琴。在我的代碼中完全沒有。我使用完全相同的代碼 – phadaphunk

如果你使用jQuery，這將是去了解它的正確方法：

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

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

（只是複製/粘貼此，它應該工作）當你正在使用jQuery

來源

2012-05-09 00:21:51

這不工作。現在我根本不會滑動。我是否需要爲標籤添加活動？ – phadaphunk

不，你需要看到我的答案，並首先關閉元素。 – adeneo

哎呀，情侶類型，修復。 @ adeneo：謝謝你的收穫。 –

我相信這將是有益的你使用類似於：

$("#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/

來源

2012-05-09 00:22:00 Jack

爲什麼使用動畫時可以使用'slideDown（）'和'slideUp（）'？另外，你沒有提到你需要給''元素添加一個ID爲'box'的元素以便上面的工作。 –

@ElliotBonneville使用animate可以很容易地改變，他可以讓他的菜單向上滑動，向左，向下，向右，淡入，淡出等。但你是對的，這消除了需要按鈕來切換菜單。我會提及，謝謝:) – Jack

真的，這裏沒有問題 - 腳本完全按照你所說的去做。然而，據我所知，你想是菜單保持打開，當你離開「觸發」元素如果用戶的鼠標現在在菜單上。試試這個：

<script type="text/javascript"> 
var timeout=250;//timeout in milliseconds to wait before hiding the menu 
var menuMouseout; 
$(document).ready(function() { 
    $("#trigger").hover(function(){ 
     $("#SlideMenu").slideDown(); 
    }, function(){ 
     menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout); 
    }); 

    $("#SlideMenu").hover(function(){ 
     clearTimeout(menuMouseout); 
    }, function(){ 
     menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout); 
    }); 
}); 
</script>

這樣，用戶留下一段時間後，將鼠標移出觸發元素以進入菜單。你可能需要擺脫超時，但這應該工作。我測試了這個，它似乎工作。如有必要，請確保將其包裝在$(document).ready中，以確保所有元素都已加載並準備就緒。

演示：http://www.dstrout.net/pub/menu.htm

來源

2012-05-09 00:35:32

+1縮進！ – adeneo

同樣在這裏youre代碼完美的例子。不在我的代碼中...這很奇怪 – phadaphunk

您是否確保將代碼中的ID從#trigger更改爲觸發器元素的實際ID？仔細看看我的演示，以確保您不會錯過任何東西，因爲這對您有用。 –

使用MouseOver和MouseOut

回答

相關問題