引导弹出窗口:当光标移动到窗口外时隐藏

Bootstrap popover: hide when cursor moves outside of the window

本文关键字：窗口 移动 隐藏 光标      更新时间：2023-09-26

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

我遇到的问题是，当触发它的链接中的光标（例如，当用户移动以选择其中一个按钮时）时，我当前使用的默认引导弹出窗口被取消

这个jsFiddle是我尝试做的一个例子。原理是：当链接（#example）悬停时显示popover，当popover（.popover）取消悬停时隐藏popover。

但这不起作用，尽管我确信BS popover被封装在.popover类中（我使用FF dev调试工具进行了检查）。

有趣的是：它与另一个div一起工作！如果我更换

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

通过这个

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

当popover不再悬停在蓝色方块上时，它确实被隐藏了。

为什么不使用.popover？

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

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

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

相关文章：