Hover CSS only working in Chrome

问题

Hey, I'm trying to use the CSS hover class and it works fine on Chrome but not on Firefox. Any help appreciated. Here's my CSS:

.albumbox .labeltext {
    visibility: hidden;
}

.albumbox:hover .labeltext {
    visibility: visible;
}

And here's the relevant HTML:

<a href="http://open.spotify.com/album/2tG6kmDtT5rysmQAtzm5UW" target="_blank"><div class='albumbox'>

<img height="200px" width="200px" src="http://userserve-ak.last.fm/serve/300x300/9351489.jpg" />

<span class='album labeltext'>Escape The Fate<br>Escape The Fate</span>

</div></a>

If you want to see the whole page, check it out here http://fyspotify.appspot.com

Thanks Tom

回答1:

The most pressing reason is that your page is rendering in Quirks Mode.

Add this (the HTML5 doctype) as the very first line in the source code, and I'm fairly sure it will automagically work:

<!DOCTYPE html>

回答2:

That's because you have block level elements inside inline elements, that is, you have a <div> inside an <a> and Firefox chooses to render this differently than Chrome as the behaviour is unspecified.

Easiest remedy would be to use a span instead of a div, either way, you cannot have block level elements inside inline elements and expect it to work correctly on all browsers.

回答3:

I believe that is because only <a> tags have the :hover event in CSS. Why don't you name that links' class albumbox and set it to display:block; via CSS?

Result is the same, but will probably be more "conform"!

来源：https://stackoverflow.com/questions/5390209/hover-css-only-working-in-chrome

标签

css

google-chrome

hover

visibility

doctype