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