在 Chrome 浏览器中，如果链接位于带有控件的 Video 元素上，则链接不可点击答案

【问题标题】：in Chrome browser, links are not clickable if they lie over a Video element with controls在 Chrome 浏览器中，如果链接位于带有控件的 Video 元素上，则链接不可点击
【发布时间】：2012-11-06 21:00:08
【问题描述】：

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

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

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

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

【问题讨论】：

您尝试更改 z 顺序吗？
是的 - 如果 z 顺序错误，那么我会认为链接会隐藏在视频对象后面？（不是所有浏览器都会出现问题吗？）正如我所说，关闭控件使其工作。
由于控件位于单独的“对象”中（我假设），它们可以具有与视频容器不同的 z 顺序，因此不一定会隐藏链接。浏览器的实现方式不同，因此（不幸的是）仅在其中一个中发生奇怪的事情是正常的。可能值得发布一些代码和屏幕截图。
我的代码示例太长，无法在评论中发布，所以我把它放在 LiveJournal 上：littlebrain2.livejournal.com/654.html 这显示了两个视频对象，一个有控件，一个没有。在 Chrome 中，我无法单击带有控件的视频对象上方的文本。

标签： html google-chrome video hyperlink controls

【解决方案1】：

我已将z-index 添加到您代码中的两个重叠元素中，它对我有用。例如，第一个 div 的 CSS 更改为：

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

第一个video 改为：

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

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

【讨论】：

谢谢！这确实也适用于我的机器。我现在感觉真的很蠢——我一定没有尝试过足够高的 z-index，否则我做了其他愚蠢的事情。仍然补充说，该问题仅发生在启用了控件的 Chrome 中，但我想这就是浏览器的乐趣；）再次感谢！