javascript - Bootstrap 弹出框 : hide when cursor moves outside of the window

Question

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

我遇到的问题是，当触发它的链接中的光标(例如，当用户移动以选择其中一个按钮时)时，我当前使用的默认 Bootstrap 弹出窗口将被关闭

<小时/>

这个jsFiddle是我尝试做的一个例子。原则是:当链接(#example)悬停时显示弹出窗口，当弹出窗口(.popover)时隐藏弹出窗口未悬停。

但这不起作用，尽管我确信 BS popover 封装在 .popover 类中(我使用 FF 开发调试工具进行检查)。

有趣的事情:它可以与另一个 div 一起使用!如果我更换

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

按此

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

当不再悬停在蓝色方 block 上时，弹出窗口确实隐藏了。

为什么不能使用.popover？

Answer 1

当鼠标离开 .popover-content 而不是 .popover 时，您需要隐藏 popover。而.popover-content一开始并不存在，所以需要将事件绑定(bind)到document

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

http://jsfiddle.net/o4o9rrsq/2/