Question

我希望在用户将鼠标悬停在文字链接上时显示一个包含多个按钮的弹出窗口

我遇到的问题是我正在使用的默认Bootstrap popover当光标来自触发它的链接时（例如当用户移动选择其中一个按钮时）被解除

这个jsFiddle是我尝试做的一个例子。原理是：当链接（#example）悬停时显示弹出窗口，弹出窗口时隐藏弹出窗口（.popover ）没有被发现。

但是这不起作用，虽然我确定BS popover被封装在.popover类中（我使用FF dev调试工具查看）。

有趣的是：它适用于另一个div！如果我更换

$('.popover').mouseleave(function(){
    $('#example').popover('hide');
});

通过这个

$('.square').mouseleave(function(){
    $('#example').popover('hide');
});

当不再徘徊在蓝色方格上时，弹片确实隐藏起来。

为什么不与.popover合作？

Answer 1

当鼠标离开.popover-content而不是.popover时，您需要隐藏弹出窗口。并且.popover-content在开头不存在，因此您需要将事件绑定到document

    $(document).on('mouseleave','.popover-content',function(){
        $('#example').popover('hide');
    });