css hover vs. javascript mouseover
- by John
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?
