CSS hover vs. JavaScript mouseover [closed]

85
votes

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?

11
javascriptcss
The CSS approach doesn't require Javascript. – pd.
I would recommend using Whatever:hover : http://www.xs4all.nl/~peterned/csshover.html – cheeaun
"Is javascript slower than css?" You won't notice it, but javascript will consume more resources and can slow things down if many other scripts are running at the same time (think expecially for handheld devices, mobile websites), and it's not what it should be used for. CSSs on the other hand use less resources and are meant exactly for presentation. You should use javascript only to enhance the website navigation and functionality, but it should be still navigable for users without js enabled. I suggest the CSS :hover approach. – Jose Faeti
This is an old question so it's not surprising that the above comment is no longer valid, and may never have been. One reason is the lack of good JS libraries that provide high performance boilerplate (see Famo.us). Another is that the JS engines in modern browsers, both desktop and mobile, are quite fast. There's a benchmark measuring it at 80% the performance of native C compiled code. There are exception cases of course, but the impressive performance of JS in the browser still stands. What people really "mean" is that the DOM is slow. JS is quite fast, they just never realized it. – pmont

11 Answers

59
votes

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.

32
votes

The CSS one is much more maintainable and readable.

11
votes

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

10
votes

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.

6
votes

A very big difference is that ":hover" state is automatically deactivated when the mouse moves out of the element. As a result any styles that are applied on hover are automatically reversed. On the other hand, with the javascript approach, you would have to define both "onmouseover" and "onmouseout" events. If you only define "onmouseover" the styles that are applied "onmouseover" will persist even after you mouse out unless you have explicitly defined "onmouseout".

6
votes

EDIT: This answer no longer holds true. CSS is well supportedand Javascript (read: JScript) is now pretty much required for any web experience, and few folks disable javascript.

The original answer, as my opinion in 2009.

Off the top of my head:

With CSS, you may 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.

5
votes

There is another difference to keep in mind between the two. With CSS, the :hover state is always deactivated when the mouse moves off an element. However, with JavaScript, the onmouseout event is not fired when the mouse moves off the element onto browser chrome rather than onto the rest of the page.

This happens more often than you might think, especially when you're making a navbar at the top of your page with custom hover states.

4
votes

In Internet Explorer, there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.

3
votes

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

2
votes

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.

0
votes

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.