Replace CSS :hover with jQuery

Question

Is there a way to automatically replace all or certain CSS :hover effects with a smooth hover from jQuery (or plain JavaScript or other library would also be OK)?

E.g. if for an element a :hover style is defined, to replace this without having to manually write the JavaScript for each?

Are you able to define, with a css rule, all of the elements that will have the hover? If you can, then the same type of selectors are available with jQuery — Kris.Mitchell
– Kris.Mitchell, Commented Aug 9, 2012 at 20:26
For supporting browsers you could just add a transition to the CSS to get smooth effects. Posting as a comment since that wasn't what you have asked for. — Torsten Walter
– Torsten Walter, Commented Aug 9, 2012 at 20:32

Micah Henning · Accepted Answer · 2012-08-09 20:38:35Z

1

I feel that this approach goes backward in terms of web progression. It's good practice to keep presentation separate from scripting. The same goes for markup: In a perfect world they should all be disparate in implementation.

Having said that, you may be able to accomplish what you need using CSS3 transitions, though they're not supported in most older browsers. See here: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FCSS_transitions

Otherwise with jQuery:

$('element').hover(function () {
    $(this).css({
        // styles in JSON
    });
});

answered Aug 9, 2012 at 20:38

Micah Henning

2,1951 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BoltClock Over a year ago

I think the whole browser support thing is part of the reason why he wants to use jQuery ;)

steveax Over a year ago

@BoltClock seems the best way would be to use feature detection and only apply the jQuery animations to browsers that don't support CSS transitions, no?

Micah Henning Over a year ago

I understand, but almost always the presentational niceties are just that; they're great for those with browsers that support them but unless they play a vital role in user interfacing, why cause performance implications for everyone?

Collectives™ on Stack Overflow

Replace CSS :hover with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related