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 um 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 o 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? JavaScript é mais lento do que css?