css hover vs. javascript mouseover

Question

There are times when I have a choice between using a css element:hover or javascript onmouseover to control the appearance of html elements on a page. Consider the following scenario where a DIV wraps an INPUT

<div>
<input id="input">
</div>

I want the input to change background color when the mouse cursor hovers over the div. The CSS approach is

<style>
input {background-color:White;}
div:hover input {background-color:Blue;}
</style>
<div><input></div>

The javascript approach is

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

What are the advantages and disadvantages of each approach? Does the CSS approach work well with most web browsers? Is javascript slower than css?

Answer 1

The CSS one is much more maintainable and readable.

Answer 2

The CSS approach doesn't require Javascript.

Answer 3

Use CSS, it makes for much easier management of the style itself.

Answer 4

The problem with :hover is that IE6 only supports it on links. I use jQuery for this kind of thing these days:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

Makes things a lot easier. That'll work in IE6, FF, Chrome and Safari.

Answer 5

Off the top of my head:

With CSS, you may h have issues with browser support.

With JScript, people can disable jscript (thats what I do).

I believe the preferred method is to do content in HTML, Layout with CSS, and anything dynamic in JScript. So in this instance, you would probably want to take the CSS approach.

Answer 6

I would recommend using Whatever:hover : http://www.xs4all.nl/~peterned/csshover.html

Answer 7

If you don't need 100% support for IE6 with javascript disabled you could use something like ie7-js with IE conditional comments. Then you just use css rules to apply hover effects. I don't know exactly how it works but it uses javascript to make a lot of css rules work that don't normally in IE7 and 8.

Answer 8

In reguards to using jQuery to do hover, I always use the plugin HoverIntent as it doesn't fire the event until you pause over an element for brief period of time... this stops firing off lots of mouse over events if you accidentally run the mouse over them or simply whilst choosing an option.

Answer 9

One additional benefit to doing it in javascript is you can add / remove the hover effect at different points in time - e.g. hover over table rows changes color, click disables the hover effect and starts edit in place mode.

Answer 10

Why not both? Use jQuery for animated effects and CSS as the fallback. This gives you the benefits of jQuery with graceful degradation.

CSS:

a {color: blue;}
a:hover {color: red;}

jQuery (uses jQueryUI to animate color):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo