I know that the :hover pseudo-class only works on anchor tags in IE6 and IE7 (not sure about IE8). However, I used to be able to hover any element in Firefox. It seems that when I upgraded to Firefox 3.5, I can only hover anchor tags. Is that the case for everyone else? If so, doesn't this seem like a step backwards?
crazyfoo, it *might* be a CSS coding issue that a newer version of FF is having issues with? If you post a url / or code of the page we could take a look
I did a little testing, and it looks like FF doesn't like :hovers on classes, but it will do hovers on IDs just fine. Weird. Try this, and tell me if you get the same results. This works in Opera, Chrome, and Safari (still need to test IE8). <html> <head> <style type="text/css"> /*Start Class Hover Styles*/ .subnavlist { display: none; } .divNavList:hover .subnavlist { display: block; position:absolute; } .divNavList:hover{ background:red; } /*End Class Hover Styles*/ /*Start ID Hover Styles*/ #subnavlist { display: none; } #divNavList:hover #subnavlist { display: block; position:absolute; } #divNavList:hover{ background:red; } /*Start ID Hover Styles*/ </style> </head> <body> <table> <tr> <td class="divNavList">Hover this class <p class="subnavlist"> Here is some awesome info. </p> </td> <td id="divNavList">Hover this id <p id="subnavlist"> Here is some awesome info. </p> </td> </tr> </table> </body> </html> Code (markup):
It works for me, or at least I get the hover text and css change when I hover over the text I am using FF 3.5.1 may I suggest closing and reloading firefox browser, or restarting your machine in case your machine is having a bit of a "moment" ?
After a restart, I'm still getting the same results. I get hover styles on the IDs but not the Classes. I've tried 2 different computers, and I have the same issue. I even tried Firefox Portable to see if one of my extensions was causing a problem. Still the same results.
my mistake, I had not fully understood the problem, I can't work out why class reference is working differently to id's sorry. I will look into this more later but have not got the time right now
Testing the code as in Post #4 above produces the following results among the browsers I tested: FF3: rollovers work partly (on the hovered id only, as noted above) IE8: completely dead Opera 9.64: rollovers work fully Anyway, I find that the problem is solved over all the browsers simply by using a proper doctype. Since a table is being used for this example, try a Transitional DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Code (markup): FF3 is clearly showing some sensitivity to the presence/absence of the doctype here. Of course, we often expect that with IE. It is better though in this case to avoid recycling the same identifier for a class and an id. "divNavList" is being used as both a class and an id, and similarly with "subnavlist". That can cause some different effects among the browsers.
Heck, since we're fixing the doctype, let's go Strict: From here. To clear up some things, IE6 was the only one who could only hover over anchors. IE7 and IE8 can (normally) hover over anything you can put a mouse over. So can Firefox and all the moderns. BTW, whether the doctype has been repaired or not, what happens with this code: td:hover{ background-color:#f00; } It should be able to highlight any td you hover over in all browsers except IE6. I did a table recently where the tr's lit up on :hover. In IE7 there was this pecularity where the very first td of the row did not highlight. Otherwise, worked as expected, in all browsers except of course IE6.
Firefox has no issues with :hover. Without a proper doctype, the box model is in quirks mode so everything is screwed up. That's why adding the doctype makes it work.
I knew FF had a "substandards" mode, but I didn't know it screwed up the box model that badly. Or affected :hover. Though that would be because I've never written a doctypeless page and then viewed it in FF : )
It doesn't screw it up. It follows the quirks mode "rules", if there is such a thing. And following the rules means hover didn't work right in this case because the box model gets jumbled up without the doctype. It's not that Firefox did anything wrong, it's doing exactly what it's supposed to do. It's also called "almost standards" mode, not "substandard". You're thinking of IE where everything is substandard.
No, I call those "Standards According to MS", so everyone knows they aren't the same as the Real Standards. Almost standard is substandard to me. Six of one, a half dozen of another. : )