Changing background-position - better to use jQuery or :hover with Selectivizr?

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,开发者_C百科 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 :)

: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; }

Nick is right : you should use native :hover capabilities. Just a few things to note : The hover effect doesn't work well in IE if the <a> doesn't have a href="" attribute. don't forget it.

Also, we often want to have a hover effect on a div. It's because of the default displaying of divs. If you want to have a <a> tag to look as a div, use display:block in your CSS.