CODEWITHSUNDEEP
jquerycss
Gavin
Gavin

Reputation: 2567

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 jQuery (fade the menu in, and out on hover out), if JS is turned on?

Upvotes: 2

Views: 517

Answers (3)

mu is too short
mu is too short

Reputation: 434655

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.

Upvotes: 0

zack
zack

Reputation: 3198

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

Upvotes: 5

Darko
Darko

Reputation: 38860

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

Upvotes: 0

Related Questions