hover() 的悬停内容答案

【问题标题】：Hover content of a hover()hover() 的悬停内容
【发布时间】：2013-04-17 12:09:30
【问题描述】：

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

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

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);   
        });
    });

【问题讨论】：

如果我们得到一些代码将很容易满足您的需求。
@The-Val 我已经添加了我的代码，如果可以解决这个问题

标签： jquery hover slidedown

【解决方案1】：

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

$(document).ready(function(){

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

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

});

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

【讨论】：

问题是当我离开按钮时我还需要slideUp功能（列表之外的其他地方）

【解决方案2】：

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

$(document).ready(function(){

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

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

    });

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

【讨论】：

Dolors 同样的错误朋友，问题是当我离开按钮时我还需要 slideUp 功能（如果我将光标移到列表之外的其他地方）
SlideUp 功能在您离开鼠标时工作，检查小提琴有什么问题

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你想这样做吗？

小提琴

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

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

【讨论】：

是的，但当我离开按钮时（而不是进入 ul，我将光标移动到其他必须隐藏的地方）
我已经更新了Fiddle @Jhonny，看看jsfiddle.net/EpV87/25，现在我用的是show()和hide()，你可以根据你的要求更换它