在 chrome 中包含 html5 视频时出现 css 悬停问题答案

【问题标题】：css hover problem when including an html5 video in chrome在 chrome 中包含 html5 视频时出现 css 悬停问题
【发布时间】：2011-07-16 04:44:57
【问题描述】：

我正在尝试对页面使用 html5 视频标签，但我发现悬停无法正常工作。我的谷歌浏览器版本是 10.0.648.133，我的操作系统是 Windows 7。

截图如下：http://i.stack.imgur.com/nOOEx.png

但是当我从页面中删除视频时，它可以正常工作。我做错了吗？

谢谢！我会感谢你的帮助。 :)

这是我的标记：

<!DOCTYPE html>
<html>
<head>
<title>Chrome mp4 video player test</title>

<style type="text/css"> 
a {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}

div.with_hover:hover {
    background: #EEEEEE;
}
</style>
</head>

<body>

<div>
<video controls="controls">
    <source src="test.mp4" type="video/mp4"/>
</video>
</div>

<div class="with_hover">
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a><br/>
    <a href="#">Link</a>
</div>
</body>
</html>

【问题讨论】：

我无法重现此问题。你有 test.mp4 的绝对网址吗？
您使用的是哪个版本的 Chrome？
@tilleryj 感谢您的帮助。 :) 对不起，我没有绝对网址。我在这里上传了文件：mediafire.com/?r1v3bemn38lh6uu
@Lime 10.0.648.133，我的操作系统是 Windows 7
我仍然无法重现它。也许尝试清除缓存。不悬停的时候是什么样子的？如果您删除视频，问题会消失吗？

标签： css html google-chrome html5-video

【解决方案1】：

视频完成后，当您停止悬停后，控件会消失，您无法让它们回来。如果您删除指向 mp4 文件的链接，它将不再发生。

【讨论】：