[解決済み] CSSのホバーとJavaScriptのマウスオーバーの比較【終了しました

質問

ページ上のhtml要素の表示を制御するのに、CSSのelement:hoverを使うか、JavaScriptのonmouseoverを使うかの選択を迫られることがある。 次のようなシナリオで、div が input をラップしている場合を考えてみましょう。

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

マウスカーソルがdivの上に乗ったときに入力の背景色を変えたい。CSSのアプローチは

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

<div><input></div>

JavaScriptのアプローチは

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

それぞれの手法のメリットとデメリットを教えてください。 CSSのアプローチは、ほとんどのウェブブラウザでうまく機能するのでしょうか？ JavaScriptはCSSより遅いですか？

どのように解決するのですか？

hoverの問題は、IE6がリンクにしか対応していないことです。 最近はこの手のものはjQueryを使っています。

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

かなり楽になります。 IE6、FF、Chrome、Safariで使えるよ。