Question

我正在使用bootstrap popover并且它工作正常但是当我将鼠标悬停在div区域之外时弹出窗口会出现。如果我将div更改为按钮，则不会发生这种情况。帮助

这是一个Demo，如果你将鼠标悬停在红色div区域之外，那么popover也会显示。

CSS

.test {
width:100px;
height:100px;
background:red;
}

HTML

 <a title="some title" class="infopop" rel="popover" data-content="some content"><div class="test">Hover over me!</div></a>

JS

$('.infopop').popover({
html: true,
trigger: 'manual',
container: $(this).attr('id'),
placement: 'right',
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);
});

Answer 1

尝试添加＆＃34; inline-block＆＃34;的显示属性到测试班。这应该将悬停覆盖范围限制为100 x 100像素。

.test {
    width:100px;
    height:100px;
    background:Red;
    overflow:hidden;
    display: inline-block;
  }

显示div区域外的bootstrap popover

1 个答案: