Internet Explorer隐藏iframe时应该在悬停时显示

Question

我创建了一个简单的鼠标,它显示了使用iframe嵌入的YouTube视频.

鼠标悬停是:将鼠标悬停在A上以显示B,如果将鼠标悬停在B上,B将一直显示,直到您将鼠标悬停在非A或B的其他位置上方.

如果您注意到,如果我将鼠标悬停在绿色框的白色空间(即B)上,它会保持打开状态,但只要我将鼠标移到iframe/youtube视频上,它就会消失.

HTML

<div class="a">cool</div>
<div class="b"><iframe width="560" height="315" src="//www.youtube.com/embed/xrMOBKHqqc8?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

CSS

.a { border: solid blue; height: 20px; }
.b {display: none; border: solid green; }
.a:hover + .b { display: block; }
.b:hover { display: block; }

JS FIDDLE LINK

顺便说一下,我使用的是IE 11. Firefox和Chrome没有这个问题.

任何可能的解决方案/建议/解决方法？

Answer 1

将此添加到您的CSS:

iframe { position: relative; z-index:-1; }

可.b iframe {也.