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   lt div gt   lt input id  input  gt   lt  div gt    I want the input to change background color when the mouse cursor hovers over the div  The CSS approach is   lt style gt    input  background-color White     div hover input  background-color Blue    lt  style gt    lt div gt  lt input gt  lt  div gt    The JavaScript approach is   lt div onmouseover  document getElementById  input   style backgroundColor  Blue    gt     lt input id  input  gt   lt  div gt    What are the advantages and disadvantages of each approach   Does the CSS approach work well with most web browsers   Is JavaScript slower than css

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

The CSS one is much more maintainable and readable

User · Answer

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

User · Answer

In Internet Explorer  there must be declared a  lt  DOCTYPE  for the  hover selector to work on other elements than the  lt a  element

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] CSS hover vs. JavaScript mouseover

Examples related to javascript

Examples related to css