我制作的一系列非引导弹出窗口有一个小问题,每个弹出窗口都包含社交按钮,并且必须在悬停或单击包含弹出窗口的元素时显示。
其中一项的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 解决了这个问题,但它会破坏一些嵌入式按钮(主要是谷歌按钮)的渲染
我准备了一个 Jsfiddle 例子:https://jsfiddle.net/victorRGS/dcv2g973/1/
似乎我们可以接受它,但我想按预期工作,而且 facebook 小部件的区域(在示例中不起作用,idk 为什么)相当大,这可能是一个真正的烦恼。
欢迎任何帮助
最佳答案
如果我正确理解你的问题,你应该试试这个。
将 pointer-events:none;
调整为隐藏时的弹出窗口,并在悬停图标时设置回 auto
。
参见示例:https://jsfiddle.net/y6Ldjuwd/
这是你想要的吗?
关于javascript - 悬停在内部 iframe 时显示弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39769568/