2

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?

Chris
  • 3,756
  • 7
  • 35
  • 54
  • what do you mean by "smooth hover"? – zzzzBov Aug 09 '12 at 20:26
  • 2
    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 Aug 09 '12 at 20:26
  • 2
    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 Aug 09 '12 at 20:32
  • 1
    @zzzzBov: a smooth transition – Chris Aug 09 '12 at 20:33
  • @Kris.Mitchell: is there a way to find out which elements have a `:hover` style defined? Similar to check if a checkbox is checked, etc.? Or you mean you have to assign a class or sth to all of them? This is what I was trying to avoid... – Chris Aug 09 '12 at 20:35
  • 1
    css3 transitions http://tinkerbin.com/UdEbFF1S – SRN Aug 09 '12 at 20:37
  • +1 for css3 transitions. Progressive enhancement ftw! – dibs Aug 09 '12 at 22:07

1 Answers1

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
    });
});
Micah Henning
  • 2,125
  • 1
  • 18
  • 26
  • 1
    I think the whole browser support thing is part of the reason why he wants to use jQuery ;) – BoltClock Aug 09 '12 at 20:42
  • 1
    @BoltClock seems the best way would be to use [feature detection](http://modernizr.com/docs/#features-css) and only apply the jQuery animations to browsers that don't support CSS transitions, no? – steveax Aug 09 '12 at 20:48
  • 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? – Micah Henning Aug 09 '12 at 20:48