当悬停内部iframe时,Popover会显示

时间:2016-09-29 11:51:57

标签: javascript html css

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

其中一个项目的html是这样的:

my_list = [
    'item3',

my_other_list = [
    'item3',

我隐藏了<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> .social__popoveropacity: 0;并使用jquery转为可见。

一切都按预期工作,问题是当您将鼠标悬停在iframe嵌入按钮所在的区域时,隐藏弹出窗口并显示弹出窗口。

在popover上使用display:none解决了这个问题,但它打破了一些嵌入式按钮(主要是谷歌按钮)的渲染

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

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

欢迎任何帮助

2 个答案:

答案 0 :(得分:1)

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

隐藏时将pointer-events:none;调整到弹窗框,并在悬停图标时将其设置回auto

参见示例:https://jsfiddle.net/y6Ldjuwd/

这是你想要的吗?

答案 1 :(得分:0)

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

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