Há momentos em que posso escolher entre usar um elemento CSS: hover ou JavaScript onmouseover para controlar a aparência dos elementos html em uma página. Considere o seguinte cenário em que uma div envolve uma entrada

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

Eu quero que a entrada mude a cor de fundo quando o cursor do mouse passar sobre a div. A abordagem CSS é

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

<div><input></div>

A abordagem do JavaScript é

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

Quais são as vantagens e desvantagens de cada abordagem? A abordagem CSS funciona bem com a maioria dos navegadores da web? O JavaScript é mais lento que o css?