ポップオーバーは、内側のiframeをホバリングしたときに表示されます

Question

ポップオーバーが含まれている要素をホバリングまたはクリックすると、ソーシャルボタンが1つずつ表示されている一連の非ブートストラップポップオーバーが表示されます。

項目のいずれかのHTMLは、このようなものです：私はopacity: 0;とvisibility: hidden;で.social__popoverを隠し、jQueryを使って目に見える回してい

<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> 

。

すべてが正常に動作します。問題は、ポップオーバーが表示されずにポップオーバーが表示されるときに、iframe埋め込みボタンが表示されている領域にカーソルを移動したときです。ディスプレイを使用して

：ポップオーバーのどれも問題を解決していないが、それは（主にボタンをグーグル）これらの組み込みのボタンのいくつかのレンダリングを破るになり

私はJsfiddle例準備：それはそうhttps://jsfiddle.net/victorRGS/dcv2g973/1/

を我々はそれと一緒に暮らすことができますが、私は期待どおりに動作するようにしたい、facebookウィジェットの領域（例では動作していない、なぜidk）は非常に大きく、これは本当に迷惑になる可能性があります。

助けを歓迎いたします

Answer 1

これを解決するには、z-indexプロパティを追加し、タッチデバイスの動作に問題はなく、問題なく動作しました。

更新例： `Zインデックスを使用してhttps://jsfiddle.net/victorRGS/dcv2g973/2/

Answer 2

私はあなたの問題を正しく理解している場合は、これを試してください。

隠されている場合はpointer-events:none;をポップオーバーに調整し、アイコンをホバーするとautoに戻ります。

は、例を参照してください：https://jsfiddle.net/y6Ldjuwd/

はこれが何をしたいですか？