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

当我MouseOver控件时，我的菜单会向下滑动，但会自动向上滑动。我想要的是让用户有时间从菜单中选择和选项，如果他不这样做，我希望只要鼠标离开控件，菜单就会关闭。

你知道为什么这不管用吗？提前谢谢。

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，因此我相信使用类似于以下内容的内容会对您有所帮助：

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

这里真的没有问题--脚本完全按照你说的做了。然而，据我所知，你想要的是当你离开“触发器”元素时，如果用户的鼠标在菜单上，菜单仍然是打开的。试试这个：

<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