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

BTW我使用的是IE 11. Firefox和Chrome没有这个问题。

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

Answer 1

将此添加到您的css：

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

也可以是.b iframe {。

Answer 2

使用此代码怎么样？ http://jsfiddle.net/X5br3/37/

IE11测试

.a { border: solid blue; height: 20px; }

.b {display: none; border: solid green; }

.a:hover + .b { display: block; }

.b:hover { display: block; }

/* added */
.b iframe {
    position:relative;
    z-index:-1;
}

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

2 个答案: