HTML5 视频在 CSS 中导致奇怪的故障：悬停转换，不能很好地跨浏览器工作

发布于 2024-11-16 10:07:50 字数 536 浏览 2 评论 0原文

我的主页在这里： http://thenozzle.net/

页面顶部的标志是一个精灵，上下切换给予发光效果。这是通过 css 转换和 :hover 伪元素完成的。

不过，我最近添加了“projekktor”HMTL5 视频播放器。它的效果非常好，但如果您启动视频，然后将鼠标悬停在徽标上，则当您将鼠标悬停在徽标上时，它会出现故障。

此外，Google Chrome 浏览器不会播放 ea.com 提供的视频战地 3 剪辑。 Chrome 无法播放它，这两件事让我发疯。他们可能有关联吗？我做错了什么？

Projekktor 主页：http://www.projekktor.com/

它在每个浏览器中的表现都不同。在 Firefox 中速度非常慢，但可以播放。在 Safari 中完美，CHrome 根本无法播放，但 Safari 有故障标志。有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦旅人picnic 2024-11-23 10:07:50

我修好了。我删除了两个锚点中的一个，并从 div 中删除了 headlink text-indent 属性，并将其放在单个锚点上。奇怪的问题，奇怪的解决方案。为了将来的参考，不要尝试对埋藏超过一层深的文本进行文本缩进，在翻转时它会螺旋式地来回跳跃。

<div title="The Nozzle" id="headerlogo">
    <div title="The Nozzle" id="logo1"></div>
    <a style="text-indent:-9999px" title="The Nozzle" href="http://thenozzle.net/"><div title="The Nozzle" id="logo2"></div>The Nozzle</a>
</div>

I fixed it. I removed 1 of the two anchors, and removed the headlink text-indent property from the div, and put it on the single anchor. Weird problem, weird solution. For future reference, don't try to text-indent text that buried more then one level deep, on your rollover it will jump back and forth spiratically.

<div title="The Nozzle" id="headerlogo">
    <div title="The Nozzle" id="logo1"></div>
    <a style="text-indent:-9999px" title="The Nozzle" href="http://thenozzle.net/"><div title="The Nozzle" id="logo2"></div>The Nozzle</a>
</div>

回复收藏 0 原文

~没有更多了~