How do I remove :hover?

Question

I have a small problem with a script.
I want to have a default action on :hover for clients with Javascript disabled, but for those with Javascript enabled I want another action (actually... same action, but I want to add a small transition effect).

So... How can I do this? I am using jQuery.

Answer 1

Apply two classes to the relvant element. one contains the hover behaviour, and one contains all the other styling.

You can then use the jquery

$(element).removeClass('hover'); 

method to remove the class with the hover behaviour and then apply whatever you want using

$(element).bind('mouseover', function () { doSomething(); }); $(element).bind('mouseout', function () { doSomething(); }); 

Answer 2

How about putting the :hover fall-back in a stylesheet that is only loaded if javascript is disabled?

<noscript>   <link href="noscript.css" rel="stylesheet" type="text/css" /> </noscript>