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?