当悬停内部iframe时弹出窗口显示

Question

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

项目之一的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> 

我躲在.social__popover与opacity: 0;和visibility: hidden;和使用jQuery转可见。

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

使用显示：无上酥料饼的解决了这个问题，但它使得打破某些那些嵌入按钮的渲染（主要是谷歌按钮）

我准备了的jsfiddle例如：https://jsfiddle.net/victorRGS/dcv2g973/1/

似乎我们可以和它一起生活，但我希望按预期工作，而且Facebook小部件（不适用于该示例，idk为什么）的区域相当大，这可能是一个真正的烦恼。

任何帮助将受欢迎

Answer 1

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

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

Answer 2

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

调整pointer-events:none;当它们被隐藏时弹出，当你悬停图标时弹回到auto。

见例如：https://jsfiddle.net/y6Ldjuwd/

这是你想要的吗？