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

【问题标题】：Bootstrap - Hover Popover Flickering with data-container=body alsoBootstrap - 悬停弹出框闪烁与 data-container=body 也
【发布时间】：2014-12-09 15:46:41
【问题描述】：

我正在使用带有 jQuery 的 Bootstrap 插件。

Bootstrap Popover 的 Hover Flickering 出现问题...我已尝试使用以下选项，但问题仍然存在

尝试的选项：

$('.article-content').popover();
$( document ).ready(function() { $('.article-content2').popover(); });
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();
});

FIDDLE

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

HERE IS WORKING FIDDLE

要添加额外的 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;
 }

【问题讨论】：

你的小提琴需要 Bootstrap
抱歉...更新了小提琴 (jsfiddle.net/zpgs5d23/1)
试试这个：Fiddle 将项目分开时看不到闪烁。闪烁可能是由于将鼠标移到两个项目上造成的，这两个项目之间有一个 div，这不是弹出框的目标，所以它来回跳跃。我会完全删除 margin-bottom。
谢谢，它在我的本地机器上像冠军一样工作... :) 但是当我在 iFrame 内部的应用程序中看到相同的内容时，我仍然会闪烁:(...是它是因为 iFrame 或 -- (DOCTYPE 我使用的是 HTML5 标准) 我不确定...
好的..我现在明白了..但不确定它是如何工作的。如果我添加“fade”css 类，它的工作方式正是我想要的......感谢你的努力

标签： jquery twitter-bootstrap bootstrap-popover

【解决方案1】：

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

.popover{ pointer-events:none; }

请参阅此github issue 了解更多信息

【讨论】：