3

現在、Photoshop でデザインされた 2 つの画像を使用するメニュー バーを作成しています。1 つは通常の画像で、もう 1 つはホバー効果のある画像です。

css と JQuery の両方を使用してホバー効果を作成できることを確認しました。たとえば、CSS を使用する方がはるかに簡単です。

image {
background-image:url ..
}

image:hover {
background-image:url ...}

ホバーすると画像が変わるだけですが、jqueryコードは少し長いと思います

この場合の CSS と JQuery の使用の違いと、CSS を使用して上記で行ったのと同じことを行う JQuery コードとは何かを教えていただければ幸いです。

前もって感謝します

4

8 に答える 8

2

簡単な答えは、スクリプトの代わりに CSS を使用して何かを行うことができるときはいつでも、それを行うことです。

ホバーがどこに適用されるかがわかるため、将来のコード編集もはるかに簡単になりますが、スクリプトでは、特に要素の名前を言及していない複雑なセレクターを使用して適用される場合、イベント ハンドラーを追跡するのが難しい場合があります。編集しようとしています。

于 2013-11-04T21:46:59.687 に答える
2

他の誰かが jQuery についてコメントすることはできますが、あらゆる目的のために、CSS で目的の効果を達成できる場合は、それを使用してください。バックグラウンドで起動するスクリプトが少ないほど、より良い結果が得られます。

画像にスプライトを使用し、ホバー時の背景位置を変更して、ブラウザがホバー画像をロードするときにクイックフラッシュが表示されないように注意してください。

2 つの画像を 1 つの JPG/Gif にスタックします。50x100pxだと

image {
   background:url('/images/img.jpg') no-repeat;
}

image:hover {
   background:url('/images/img.jpg') no-repeat 0 -50px;
}
于 2013-11-04T21:48:03.527 に答える
1

cssに依存します。サポートする必要がある場合、特定のものは古いブラウザーではサポートされません。可能であれば、ほとんどの場合、js ではなく css で行う必要がありますが、もちろん注意が必要です。css では、はるかに複雑な場合があります。また、ブラウザーが必要なものを実装していない場合もあります (アニメーションなど)。

ただし、一般的には、css でそれを行うことができ、サポートする必要があるすべてのブラウザーがソリューションを使用できると確信している場合は、js を介したスタイル ソリューションを使用できます。

于 2013-11-04T21:49:26.973 に答える
1

jQuery をうまく使用するmouseenter()と、関数とmouseleave()関数を使用してクラスを追加し、それに応じてクラスを削除して、ホバー効果を与えることができますが、jQuery コードと CSS スタイルが必要になるため、CSS だけでなくより多くのコードが必要になります。追加するクラスとともに。

ただし、モバイル ユーザーのことを気にしている場合は、ホバー効果によってユーザーが別の場所に移動しようとしているときに別のクリックが追加されることを念頭に置いておく必要があります。最初のクリックでホバー状態が初期化され、次のクリックでユーザーが URL に移動します。jQuery ではこれは問題になりませんが、ユーザーがブラウザで Javascript をオフにしている場合は問題になるため、フォールバックを考慮する必要があります。

したがって、どのアプローチを採用するかによって異なります。

于 2013-11-04T21:49:28.633 に答える
1

CSS は、マシン コードへのステップが少ないため、はるかに高速です。jQuery のすべてである Javascript は、Chromes V8 のようなエンジンを通過する必要があります。したがって、CSS よりもはるかに低速です。:hoverCSS疑似セレクターの場合のように、既にブラウザーに組み込まれている JavaScript のロジックを書き換えるのに時間を無駄にすべきではありません。

やること

image {
  background-image: url(image1.jpg);
}

image:hover {
  background-image: url(image2.jpg);
}

jQuery では次のようになります。

$(image).on( 'mouseenter', function(){
  $(this).css({ background-image : 'url(image2.png)' })
}).on( 'mouseleave', function(){
  $(this).css({ background-image : 'url(image1.png)' })
});
于 2013-11-04T21:53:19.590 に答える
0

画像を変更したいだけなら、CSS が最適です。実装時だけでなく、Web サイトを実行するときも、jQuery を使用するよりもはるかに高速でシンプルです。ただし、画像を変更するときに少し効果が必要な場合 (フェードや移動効果など)、jQuery を選択する必要があります。

于 2013-11-05T06:50:53.153 に答える
0

もう少しグーグルを試してみてください...「jqueryを使用してホバー効果に適用してください」->

  $("p").hover(function(){
    $("p").css("background-image","url ..");
    },function(){
    $("p").css("background-image","url ......");
  });

ソース: http://www.w3schools.com/jquery/event_hover.asp

あなたの質問の他の部分については、上記のアンサーがほぼカバーしています。

于 2013-11-04T21:49:30.387 に答える