Search code examples
csscss-selectorssemantics

Should the cursor property be set in a rule with or without the :hover pseudo-class?

Say you, or I, have coded an HTML element...

<a id='hydrogen' href='#'>H</a>

...and some :hover CSS...

#hydrogen:hover {
  background:red;
}

...and now we want to put a fancy hand cursor when hovering. There's two options for this:

apply to stateless element: 

#hydrogen { 
  cursor:pointer;
}

or, apply to :hover state.

#hydrogen:hover { 
  color:red;
  cursor:pointer;
}

My question: is there any reason(s) why one way is decisively better than the other?

...or is it tomato, tomato?

Solution

  • Compatibility: IE6 and below only recognize the :hover pseudo class on a elements.