悬停内部 iframe 时显示弹出框答案

【问题标题】：Popover shows when hovering inner iframe悬停内部 iframe 时显示弹出框
【发布时间】：2017-02-07 17:40:05
【问题描述】：

我对我制作的一系列非引导弹出框有一个小问题，每个弹出框都包含社交按钮，并且在悬停或单击包含弹出框的元素时必须显示。

其中一项的html是这样的：

<li class="social__list-item  js-show-popover">
    <a href="" class="social__link  footer-social__link  footer-social__link--googleplus"></a>
    <div class="media  social__popover">
        <div class="media-left">
            <span class="popover__img"></span>
        </div>
        <div class="media-body">
            <p class="popover__title">Síguenos en Google+</p>
            <div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/104645458102703754878" data-rel="community"></div>
        </div>
    </div>
</li>

我用opacity: 0; 和visibility: hidden; 隐藏.social__popover 并用jquery 变为可见。

一切都按预期工作，问题是当您将鼠标悬停在 iframe 嵌入按钮所在的区域时，弹出框被隐藏并且它们使弹出框显示出来。

在弹出框上使用 display:none 可以解决问题，但它会破坏一些嵌入式按钮（主要是 google 按钮）的呈现

我准备了一个 Jsfiddle 示例：https://jsfiddle.net/victorRGS/dcv2g973/1/

似乎我们可以忍受它，但我想按预期工作，而且 facebook 小部件的区域（在示例中不工作，idk 为什么）相当大，这可能是一个真正的烦恼。

欢迎任何帮助

【问题讨论】：

解决了在隐藏时使用z-index: -1;，在可见时使用z-index: 10;

标签： javascript html css

【解决方案1】：

我通过添加z-index 属性解决了这个问题，并且工作正常，在触摸设备中没有任何行为问题。

更新示例：https://jsfiddle.net/victorRGS/dcv2g973/2/

【讨论】：

【解决方案2】：

如果我理解你的问题，你应该试试这个。

将pointer-events:none; 调整为隐藏时的弹出框，并将鼠标悬停在auto 上。

查看示例：https://jsfiddle.net/y6Ldjuwd/

这是你想要的吗？

【讨论】：

这正是我想要的！非常感谢！
经过更多测试后，我发现此解决方案在触摸设备中的行为不正确：\
会发生什么？也许您的弹出框在触摸屏设备上根本不起作用？
弹出框有效，但是当弹出框不可见时，我可以访问这些 iframe 链接。我已经在 Ipad 中使用 Safari 和 Chrome 以及在 Android 设备中使用 Chrome 和 Stock 浏览器进行了测试。 Caniuse 说它应该可以工作。我正在考虑使用这些按钮的静态版本，但我会失去这个设计看起来非常不错的 Fb 页面插件。
你可以尝试使用 'opacity' 而不是 'visibilty'。