在 Chrome 中包含 html5 视频时的 CSS 悬停问题
我正在尝试对页面使用 html5 视频标签，但我发现悬停无法正常工作。我的 Google Chrome 版本是 10.0.648.133，操作系统是 Windows 7。
截图如下： https:// /i.sstatic.net/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>
I'm trying to use the html5 video tag for a page but I discovered that the hover is not working properly. The version of my Google Chrome is 10.0.648.133, and my OS is Windows 7.
Here's a screenshot: https://i.sstatic.net/nOOEx.png
But when I remove the video from the page it works fine. Am I doing something wrong?
Thanks! I'll appreciate your help. :)
Here's my markup:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
视频完成后，当您停止悬停控件后，控件就会消失，并且您无法让它们返回。如果删除 mp4 文件的链接，这种情况就不会再发生。
After the video's completion, and after you stop hovering the controls disappear and you can't get them to come back. If you remove the link to the mp4 file it will no longer happen.