弹出窗口显示悬停在内部iframe

I have a small issue with a series of non-bootstrap popover made by me that contains social buttons each one and have to be shown when hovering or clicking an element that contains the popover.

我有一个小问题，我制作了一系列非引导弹窗，每个弹窗都包含社交按钮，当悬停或单击包含弹窗的元素时必须显示出来。

The html of one of the items is like this:

其中一个项目的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>

I am hiding .social__popover with opacity: 0; and visibility: hidden; and turn visible with jquery.

我在隐藏。social__popover的不透明度:0;和可见性:隐藏;用jquery显示。

Everything works as expected, the problem is when you hover over the area where the iframe embedded buttons are when the popover is hidden and they make the popover to show.

一切都如预期的那样工作，问题是当你悬停在iframe嵌入按钮所在的区域时，弹出窗口被隐藏，并使弹出窗口显示出来。

Using display:none on the popover solves the issue, but it makes to break the rendering of some of those embedded buttons (mainly google buttons)

使用display:弹窗上的none可以解决问题，但是它会破坏一些嵌入式按钮的呈现(主要是谷歌按钮)

I prepared a Jsfiddle example: https://jsfiddle.net/victorRGS/dcv2g973/1/

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

It seems that we can live with it but I would like to work as expected, also the area of the facebook widget (not working in the example, idk why) is quite bigger and this one could be a real annoyance.

我们似乎可以接受它，但我希望按照预期工作，而且facebook小部件的区域(在示例idk why中不工作)相当大，这个可能是一个真正的麻烦。

Any help will be welcome

欢迎任何帮助

2 个解决方案

#1

If I am understanding your problem right, you should try this.

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

Adjust pointer-events:none; to the popover when they are hidden, and set back to auto when you hover the icon.

调整pointer-events:没有;当弹出窗口隐藏时返回，当您悬停图标时返回自动。

See example: https://jsfiddle.net/y6Ldjuwd/

看到示例:https://jsfiddle.net/y6Ldjuwd/

Is this what you want?

这就是你想要的吗?

2 个解决方案

#1

更多相关文章

随机推荐