Question

I’ve been doing background rollovers with jQuery for a while now, like this:

 $("#menusearchbutton").hover(function(){$(this).css('backgroundPosition', '0px -24px');},function(){$(this).css('backgroundPosition', '0px 0px');});

but I recently came across Selectivizr which allows the use of pseudoclasses in IE6-8, which would include :hover.

Would that be a better method than using jQuery? They’re both JS, of course, so it doesn’t get round the requirement for users to have javascript enabled. But apart from that, is there any benefit to be gained from using one instead of the other?

Cheers 🙂

Answer 1

:hover already works in IE7+, IE6 only allows it with a <a> elements…so I’d say you can already use CSS alone with no library, as long as IE6 isn’t a concern.

#menusearchbutton { background-position: 0px 0px; }
#menusearchbutton:hover { background-position: 0px -24px; }