我正在使用twitter boostrap的popover創(chuàng)建一個懸停卡來顯示用戶信息，并且在mouseover check jsfiddle上觸發(fā)popover。我想在懸停該彈出窗口時使其保持活動狀態(tài)。<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懸?？ǖ墓ぷ?。我想用同樣的方法。我怎樣才能做到這一點？
3 回答
藍山帝景
TA貢獻1843條經(jīng)驗 獲得超7個贊
進行細微修改（來自vikas提供的解決方案）以適合我的用例。
1.在彈出事件上為彈出按鈕
打開彈出窗口。2.懸停在彈出框上時，使彈出窗口保持打開狀態(tài)
。3. 在鼠標(biāo)窗上關(guān)閉彈出按鈕或彈出框上的彈出窗口。
$('.pop').popover({
trigger: 'manual',
html: true,
animation: false
})
.on('mouseenter', function () {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function () {
$(_this).popover('hide');
});
}).on('mouseleave', function () {
var _this = this;
setTimeout(function () {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 300);
});
白衣染霜花
TA貢獻1796條經(jīng)驗 獲得超10個贊
我追求了另一種解決方案...代碼如下
$('.selector').popover({
html: true,
trigger: 'manual',
container: $(this).attr('id'),
placement: 'top',
content: function () {
$return = '<div class="hover-hovercard"></div>';
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
- 3 回答
- 0 關(guān)注
- 639 瀏覽
添加回答
舉報
0/150
提交
取消