當懸停內部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/

這是你想要的嗎？