Wednesday, 8 July 2009

:hover pseudo class and spans

I was just working on a page that when hovering over an element it would change the background colour, the element in question was a span tag. The CSS I was using was

editable-element:hover
{
background-color:#EEEEEE;
border:1px solid black;
cursor:pointer;
}

which works fine and dandy in Safari 4...I noticed it did diddly squat in Firefox 3.5, the solution change it to

span.editable-element:hover
{
background-color:#EEEEEE;
border:1px solid black;
cursor:pointer;
}
It seems FF needs the element type when using :hover and alike.

1 comments:

theazureshadow said...

As far as I can tell, it looks like this is solely an issue with Firefox's quirks mode. Add a DOCTYPE, and the problems clear up. No idea why Firefox's quirks mode fails here where other browsers don't have problems (and previous versions of Firefox didn't). But it's good practice to include a DOCTYPE declaration anyway.