Hay momentos en los que tengo la opción de elegir entre usar un elemento CSS: pasar el mouse o JavaScript sobre el mouse para controlar la apariencia de los elementos html en una página. Considere el siguiente escenario donde un div envuelve una entrada

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

Quiero que la entrada cambie el color de fondo cuando el cursor del mouse se desplace sobre el div. El enfoque CSS es

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

<div><input></div>

El enfoque de JavaScript es

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

¿Cuáles son las ventajas y desventajas de cada enfoque? ¿El enfoque CSS funciona bien con la mayoría de los navegadores web? ¿JavaScript es más lento que css?