悬停弹出式窗口时，如何保持启动弹出式窗口的生命？

Question

我正在使用twitter boostrap的popover创建一个悬停卡来显示用户信息，并且在mouseover check jsfiddle上触发popover。我想在悬停该弹出窗口时使其保持活动状态。

<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>

$('#example').popover({

        html : true,

        trigger : 'manual',

        content : function() {

            return '<div class="box"></div>';

        }

    });

$(document).on('mouseover', '#example', function(){

    $('#example').popover('show');

});

$(document).on('mouseleave', '#example', function(){

    $('#example').popover('hide');

});

您可以想到facebook悬停卡的工作。我想用同样的方法。我怎样才能做到这一点？

Answer 1

进行细微修改（来自vikas提供的解决方案）以适合我的用例。1.在弹出事件上为弹出按钮打开弹出窗口。2.悬停在弹出框上时，使弹出窗口保持打开状态。3. 在鼠标窗上关闭弹出按钮或弹出框上的弹出窗口。$('.pop').popover({&nbsp; &nbsp; trigger: 'manual',&nbsp; &nbsp; html: true,&nbsp; &nbsp; animation: false}).on('mouseenter', function () {&nbsp; &nbsp; var _this = this;&nbsp; &nbsp; $(this).popover('show');&nbsp; &nbsp; $('.popover').on('mouseleave', function () {&nbsp; &nbsp; &nbsp; &nbsp; $(_this).popover('hide');&nbsp; &nbsp; });}).on('mouseleave', function () {&nbsp; &nbsp; var _this = this;&nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; if (!$('.popover:hover').length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(_this).popover('hide');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 300);});

Answer 2

我追求了另一种解决方案...代码如下&nbsp; &nbsp; $('.selector').popover({&nbsp; &nbsp; &nbsp; &nbsp; html: true,&nbsp; &nbsp; &nbsp; &nbsp; trigger: 'manual',&nbsp; &nbsp; &nbsp; &nbsp; container: $(this).attr('id'),&nbsp; &nbsp; &nbsp; &nbsp; placement: 'top',&nbsp; &nbsp; &nbsp; &nbsp; content: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $return = '<div class="hover-hovercard"></div>';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).on("mouseenter", function () {&nbsp; &nbsp; &nbsp; &nbsp; var _this = this;&nbsp; &nbsp; &nbsp; &nbsp; $(this).popover("show");&nbsp; &nbsp; &nbsp; &nbsp; $(this).siblings(".popover").on("mouseleave", function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(_this).popover('hide');&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }).on("mouseleave", function () {&nbsp; &nbsp; &nbsp; &nbsp; var _this = this;&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!$(".popover:hover").length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(_this).popover("hide")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, 100);&nbsp; &nbsp; });