CSSホバーとJavaScriptマウスオーバー[クローズ]

CSS element：hoverまたはJavaScript onmouseoverのどちらを使用して、ページ上のhtml要素の外観を制御するかを選択できる場合があります。divが入力をラップする次のシナリオを考えてみましょう

<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アプローチはほとんどのWebブラウザでうまく機能しますか？JavaScriptはcssより遅いですか？

：hoverの問題は、IE6がリンク上でのみサポートすることです。私は最近、この種のことにjQueryを使用しています。

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

物事をはるかに簡単にします。これは、IE6、FF、Chrome、Safariで機能します。

CSSのものははるかに保守可能で読みやすいです。

なぜ両方ではない？アニメーション効果にはjQueryを使用し、フォールバックとしてCSSを使用します。これにより、jQueryの利点と適切な劣化が得られます。

CSS：

a {color: blue;}
a:hover {color: red;}

jQuery（jQueryUIを使用して色をアニメーション化）：

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

デモ

javascriptでそれを行うことのもう1つの利点は、さまざまな時点でホバー効果を追加/削除できることです。たとえば、テーブルの行にカーソルを合わせると色が変わり、クリックするとホバー効果が無効になり、インプレースモードで編集が開始されます。

非常に大きな違いは、マウスが要素の外に移動すると、「：hover」状態が自動的に非アクティブ化されることです。その結果、ホバーに適用されたスタイルは自動的に元に戻されます。一方、javascriptアプローチでは、「onmouseover」イベントと「onmouseout」イベントの両方を定義する必要があります。「onmouseover」のみを定義した場合、「onmouseout」を明示的に定義しない限り、「onmouseover」が適用されるスタイルは、マウスアウトした後も保持されます。

編集：この答えはもはや当てはまりません。CSSは十分にサポートされており、Javascript（読み取り：JScript）は、Webエクスペリエンスにほぼ必要であり、javascriptを無効にする人はほとんどいません。

2009年の私の意見としての元の答え。

頭のてっぺんから：

CSSでは、ブラウザのサポートに問題がある可能性があります。

JScriptを使用すると、人々はjscriptを無効にすることができます（それが私が行うことです）。

HTMLでのコンテンツ、CSSを使用したレイアウト、およびJScriptで動的なものを実行することをお勧めします。したがって、この場合は、CSSアプローチを採用することをお勧めします。

2つの間に覚えておくべき別の違いがあります。CSSを使用すると、マウスが要素から離れると、:hover状態は常に非アクティブ化されます。ただし、JavaScriptを使用すると、onmouseoutマウスが要素から離れてページの残りの部分ではなくブラウザのchromeに移動してもイベントは発生しません。

これは、特にカスタムホバー状態でページの上部にナビゲーションバーを作成している場合に、想像以上に頻繁に発生します。

Internet Explorerでは、：hoverセレクターが<a>要素以外の要素で機能するように、<！DOCTYPE>を宣言する必要があります。

CSSを使用すると、スタイル自体の管理がはるかに簡単になります。

jQueryを使用してホバーを実行することを防ぐために、私は常にプラグインHoverIntentを使用します。これは、要素を短時間一時停止するまでイベントを発生させないためです...これにより、誤って実行した場合に多くのマウスオーバーイベントが発生しなくなります。それらの上にマウスを置くか、単にオプションを選択している間。

javascriptを無効にしてIE6を100％サポートする必要がない場合は、IE条件付きコメント付きのie7-jsのようなものを使用できます。次に、cssルールを使用してホバー効果を適用します。それがどのように機能するかは正確にはわかりませんが、JavaScriptを使用して、IE7および8では通常は機能しない多くのcssルールを機能させます。