Question

我有一个简单的按钮，可以在悬停时显示一个列表。

我只需要悬停列表内容，就像下拉菜单一样。如何添加脚本来执行该功能？

HTML

<button id="test">Hover Me</button>
<ul class="tester">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
  <li>Menu 6</li>
  <li>Menu 7</li>
  <li>Menu 8</li>
</ul>

脚本

$(document).ready(function() {

    $("#test").hover(
        function () {
            $('.tester').slideDown(500);
        },
        function () {
            $('.tester').slideUp(500);   
        });
    });

Answer 1

不是使用.hover（），而是在按钮上使用.mouseenter（）来显示菜单，在菜单上使用.mouseleave（）来再次隐藏它。

$(document).ready(function(){

  $("#test").mouseenter(function () {
    $('.tester').show();
  });

  $('.tester').mouseleave(function() {
    $(this).hide();
  });

});

在此处编辑您的jsbin：http://jsbin.com/iroxop/1/edit

Answer 2

你想这样做吗？

<强>小提琴

http://jsfiddle.net/EpV87/25/

刚刚使用了slideUp()和slideDown()

Answer 3

我刚刚根据您的要求修改了Scottie的代码

$(document).ready(function(){

      $("#test").mouseenter(function () {
    $('.tester').slideDown(500);
      });

      $('.tester').mouseleave(function() {
        $(this).slideUp(500);   
      });

    });

http://jsfiddle.net/dolours/mTa6j/

Answer 4

听起来您的问题是，当您将鼠标悬停在按钮上时，菜单会显示，但当您将鼠标悬停在菜单上时，菜单会消失。尝试将button和ul元素包装在另一个div中，将悬停函数附加到该包装器。这个fiddle中的工作示例。

$("#menu").hover(
    function () {
        $('.tester').slideDown(500);
    },
    function () {
        $('.tester').slideUp(500);
    }
);

悬停的内容（）

4 个答案: