2

我在 HTML5 文档中有一个视频元素。有一个控制面板 div 可以动态滑出以部分覆盖视频元素。

这在 Firefox 和 IE9 中运行良好。但是，在 Google Chrome 中，位于 Video 元素上的任何链接的任何部分都不可点击。当您将鼠标悬停在链接上时，指针不会改变，单击链接没有任何效果。

如果我将 Video 元素设置为不显示控件，问题就解决了。但奇怪的是，如果 Video 元素以启用控件开始，然后我动态删除 Controls 属性，则链接是不可点击的。我尝试过同时使用 jQuery 和常规 JavaScript。

目前，我不需要显示控件，所以我的页面还可以。但我想更好地理解这个问题（另外，如果其他人有同样的问题，也许这篇文章会帮助他们？）。有谁知道，与 IE9 和 FF 相比，Chrome 处理视频元素的方式有什么不同吗？

4

1 回答 1

1

我已经z-index在你的代码中添加了两个重叠的元素，它对我有用。例如，firstdiv的 CSS 更改为：

div.first {
  left: 0;
  top: 0;
  z-index: 255;
}

首先video更改为：

<video controls style="z-index:0">

我可以单击第一个内部的链接div，包括浮动在video元素上的那部分。

于 2012-11-06T13:00:08.560 回答