jquery - Bootstrap - 悬停弹出框闪烁与 data-container=body 也

Question

我正在使用带有 jQ​​uery 的 Bootstrap 插件。

Bootstrap Popover 的 Hover Flickering 问题...我尝试了以下选项，但问题仍然存在

尝试的选项：

1. $('.article-content').popover();
2. $( document ).ready(function() { $('.article-content2').popover(); });
3. data-container="body"

HTML

<article>

<span class="article-content" href="#" data-content="Popover with Hover" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Mouse Over</span>        
<span class="article-content2" href="#" data-content="Popover with with Document Ready" rel="popover" data-placement="bottom" data-original-title="Title 2" data-trigger="hover">Mouse Over with Document Ready</span>        
<span class="article-content2" href="#" data-content="Popover with with Document Ready &amp; data-container=body" rel="popover" data-placement="bottom" data-original-title="Title 3" data-trigger="hover" data-container="body">Mouse Over with Document Ready &amp; data-container="body"</span>

</article>

CSS

body{margin:50px;}    
article span{background:#ddd;width:100%;float:left;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:5px;text-align:center;cursor:pointer;margin-bottom:1px;}

jQuery

$('.article-content').popover();

$( document ).ready(function() {
    $('.article-content2').popover();
});

小提琴

感谢@mijopabe，如果我们没有，我们只需要添加“ fade ” CSS 类。完全不知道这种关系，但它就像一个冠军。

这是工作小提琴

要额外添加的 CSS 类以消除闪烁

.fade {
   opacity: 0;
   -webkit-transition: opacity 0s linear;
      -moz-transition: opacity 0s linear;
       -ms-transition: opacity 0s linear;
        -o-transition: opacity 0s linear;
           transition: opacity 0s linear;
 }

Answer 1

要解决悬停时的闪烁问题，您可以在弹出框上添加此类

.popover{ pointer-events:none; }

有关更多信息，请参阅此github 问题