Popover zeigt beim Schweben inneren Iframe

Question

Ich habe ein kleines Problem mit einer Reihe von nicht-Bootstrap Popover von mir gemacht, die soziale Schaltflächen enthält und angezeigt werden, wenn Sie den Mauszeiger über ein Element, das das Popover enthält.

den HTML-Code eines der Elemente ist wie folgt:

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

I .social__popover mit opacity: 0; und visibility: hidden; mich verstecke und schalten sichtbar mit jquery.

Alles funktioniert wie erwartet, das Problem ist, wenn Sie den Mauszeiger über den Bereich bewegen, in dem sich die eingebetteten Iframe-Schaltflächen befinden, wenn das Popover ausgeblendet ist und das Popover angezeigt wird.

Mit display: none auf der popover das Problem löst, aber es macht die Wiedergabe einiger dieser eingebetteten Schaltflächen (vor allem Google Tasten)

ich bereit, einen Jsfiddle Beispiel zu brechen: https://jsfiddle.net/victorRGS/dcv2g973/1/

Es scheint, dass wir damit leben können aber ich würde gerne arbeiten wie erwartet, auch der bereich des facebook-widgets (funktioniert im beispiel nicht, idk warum) ist etwas größer und das könnte ein echter ärger sein.

Jede Hilfe wird

Answer 1

Ich löste das Hinzufügen der z-index Eigenschaft und funktionierte gut, ohne Verhaltensprobleme in Touch-Geräten.

Aktualisiert Beispiel: https://jsfiddle.net/victorRGS/dcv2g973/2/

Answer 2

Wenn ich verstehe Ihr Problem richtig willkommen sein, sollten Sie dies versuchen.

Passen Sie pointer-events:none; an das Popover an, wenn sie ausgeblendet sind, und setzen Sie es auf zurück, wenn Sie das Symbol bewegen.

Siehe Beispiel: https://jsfiddle.net/y6Ldjuwd/

Ist das, was Sie wollen?