CSS pseudo-classes and jQuery animation?

I'd like to use CSS's :hover pseudo-class to control a drop-down on hover. That's been accomplished. The tricky part, however, is animating that drop-down. I do not want to rely on jQuery to make the menu show up at all, it should work perfectly (albeit without the fade animation) with JS off. Is there a way to 'hook' into CSS's :hover and instead run some jQu开发者_如何学JAVAery (fade the menu in, and out on hover out), if JS is turned on?

very roughly, say you have <ul class="css-hovers">

then in jquery $('ul').removeClass('css-hovers').addClass('js-hovers'); - so the css and js hovers wont run at the same time ..

and add your jquery hovers: $('ul.js-hovers').hover(function () { ... etc - see Darko Z's answer

Thats fairly easy to accomplish with jQuery. Just have a look at this documentation: http://api.jquery.com/hover/

Just remember to suppress the CSS hover when JS/jQuery is available

Have a look at the Superfish jQuery plugin, it just adds some fancy animation and hoverIntent support to a standard suckerfish CSS menu system. You can either just drop it in and move on to other things or study the source to find out how it works.