问题
I've got my main page here: http://thenozzle.net/
The logo at the top of the page is a sprite, switches between top and bottom to give the glow effect. This is done with css transition and :hover pseudo element.
However, I recently added the 'projekktor' HMTL5 video player. It works really well, but if you start the video, then hover of the logo, it glitches out when you mouse-over.
Also, Google Chrome doesn't play the video served from ea.com The Battlefield 3 clip. Chrome won't play it, these two things are driving me nuts. COuld they be related? What am I doing wrong?
Projekktor homepage: http://www.projekktor.com/
It performs differently in every browser. Horribly slow in Firefox, but it plays. Perfect in Safari, CHrome it won't play at all, but Safari has the glitchy logo. Any ideas?
回答1:
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>
来源：https://stackoverflow.com/questions/6395213/html5-video-causes-weird-glitch-in-css-hover-transition-doesnt-work-well-cros