jquery ホバー イベントを使用して table_jquery のインターレース色変更機能を実装する例

jQuery hover event

hover(over,out) は、ホバー イベント (マウスがオブジェクトの上を移動したり、オブジェクトの外に移動したりする) をシミュレートするメソッドです。これは、頻繁に使用されるタスクに「保持」状態を提供するカスタム メソッドです。
マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。さらに、マウスがまだ特定の要素 (たとえば、div 内の画像) 内にあるかどうかの検出も行われ、そうである場合は、move-out イベントをトリガーせずに「ホバー」状態を維持し続けます。 (イベントでよくある間違いであるマウスアウトの使用法を修正しました)。

パラメータ:
over (関数): マウスが要素上に移動したときにトリガーされる関数
out (関数): マウスが要素上に移動したときにトリガーされる関数要素

の外に移動します。 例:
マウスオーバー テーブルと特定のクラス

jQuery コード:

コードをコピー コードは次のとおりです:

$(".table_list tr").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");

);

ここでいくつか注意してください:
1. .hover はクラスであり、必要なエフェクトを記述できます。

2. jquery.js ファイルをインポートすることを忘れないでください。インポートしないと機能せず、エラーが報告されます。

3. this.bgColor='red' などの従来の CSS と比較すると、はるかに単純で、行ごとに追加する必要がありません。

4. もちろん、奇数行と偶数行では異なる効果が得られる可能性があります。読者は独自に調査できます。

今日私は、jquery の each メソッドを使用する、より簡単な方法を見つけました。これには、1 行のコードだけでインターレース色の変更効果を実現できます。マウスを動かしても変化しません。

コードをコピー コードは次のとおりです:

$(".tablist tr")。 each(function (i){this.style.backgroundColor=['#ccc','#fff'][i%2]});