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?

Answer 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
    });
});