在悬停弹出窗口中，带有菜单答案

【问题标题】：On hover popup, with a menu在悬停弹出窗口中，带有菜单
【发布时间】：2012-09-20 18:10:57
【问题描述】：

有人问我在 jquery 中编写类似代码的最优雅的解决方案

http://jsfiddle.net/lucaguglielmi/z3PKm/

当然，您应该可以将鼠标悬停在弹出窗口上并单击一个按钮。

优雅意味着干净的代码，具有良好的性能和最大的可用性，没有鼠标悬停/移出错误。如果鼠标悬停出现错误并且没有其他插件然后 jquery，用户应该有一些时间回到弹出窗口。

我们也可以更改 HTML，但 3 按钮必须保留。

关于如何进行的任何建议？可以用定时器吗？

提前致谢

【问题讨论】：

标签： jquery popup

【解决方案1】：

http://jsfiddle.net/z3PKm/12/

向弹出菜单本身添加一些弹出规则（并且它必须触摸按钮）（使用 div 包装使其透明并位于按钮上方） - 或使用 @ 之外的超时功能987654322@

这是我认为最简单的解决方案

【讨论】：

【解决方案2】：

我对这样的 UX 元素的经验是，它会导致用户感到沮丧；因此，您可能需要完全重新考虑您的方法，以便有另一种显示两个按钮的方式，而不依赖于将鼠标悬停在元素上。另一个支持重构设计的理由是，它不能在平板电脑或手机等触控设备上工作，因为没有“悬停”的概念。

但是，如果您确实想这样做，我认为使用计时器是您的最佳选择。 Alex 的解决方案通过消除按钮和容器之间的间隙来工作，但这也会导致挫败感：例如，如果用户的鼠标悬停在按钮上，然后沿对角线移动到现在可见的容器上，首先越过背景，容器就会消失。此外，从设计的角度来看，消除两个元素之间的视觉差距可能是不可取的。

然而，仅仅使用setTimeout 并不是一件简单的事情，因为如果你将鼠标悬停在按钮上，然后转到弹出窗口，如果你按下任何按钮的速度不够快，它仍然会消失。因此，当他们进入弹出窗口时，您还必须使用clearTimeout，并且大概在他们离开时隐藏弹出窗口。所以，这就是你需要的：

首先，声明一个变量来保存超时 ID（为简单起见，我使用了一个全局变量，但您可能希望在其中一个元素上使用属性）：

var hidePopupTimeoutId;

然后像这样修改您的 .choose 事件：

$(".choose").live("mouseover", function () {
    // no need to check if hidePopupTimeoutId is undefined; clearTimeout
    // will fail silently
    clearTimeout( hidePopupTimeoutId );
    $(".popup").show();
});


$(".choose").live("mouseout", function () {
    // we don't hide the popup immediately, but give the user a reasonable
    // amount of time to mouse over it
    hidePopupTimeoutId = setTimeout( function() {
        $(".popup").hide();
    },500);
});

请注意，我们必须清除 mouseover 事件的超时时间：否则，如果您将鼠标悬停在按钮上，然后将鼠标移开，然后再将鼠标移回，即使您的鼠标在按钮上，它也会消失！

接下来，我们添加一些逻辑来确保当鼠标悬停在弹出窗口上时它仍然可见：

$(".popup").live("mouseenter", function() {
    clearTimeout( hidePopupTimeoutId );
});


$(".popup").live("mouseleave", function() {
    $(".popup").hide();
});

请注意，我们使用 jQuery 的 mouseenter 和 mouseleave 事件而不是 mouseover 和 mouseout；这是因为当您将鼠标悬停在弹出窗口的其中一个子元素（如按钮）上时，mouseout 将被调用，并且弹出窗口将消失！

你有它。这是一个 jsFiddle 演示：http://jsfiddle.net/z3PKm/15/

【讨论】：