1

私はjQueryを初めて使用し、 andエフェクト.hover();の代わりにエフェクトを使用する方法を理解しようとしています。これがシーンリオです：.mouseover().mouseout()

テーブルを使用していて、背景色を明るい黄色に変更するCSSクラスで行を強調表示したいと思います。CSSは次のとおりです。

.bgHvr {
  background-color: #FFFACD;
}

私が望むホバー効果を追加する方法を知る唯一の方法は次のとおりです。

jQuery(document).ready(function($) {
  $('#table tbody tr').mouseover(function() {
    $(this).addClass('bgHvr');
  });
  $('#table tbody tr').mouseout(function() {
    $(this).removeClass('bgHvr');
  });
});

アップデート：

さらに助けを求めた後、ホバー効果のより簡単な方法を見つけました。

$('#table tbody tr').hover(function() { 
  $(this).toggleClass('bgHvr');
});

これは、.toggle()エフェクトの動作方法を変更したjQueryへの1.4.2アップデート後に可能になります。

4

4 に答える 4

4

ホバーは基本的に2つのイベントを1つに結合します。

.hover(mouseover,mouseout)

またはあなたの場合：

jQuery(document).ready(function($) {
  $('#table tbody tr').hover(function() {
    $(this).addClass('bgHvr');
  },function() {
    $(this).removeClass('bgHvr');
  });
});
于 2011-06-02T13:12:37.513 に答える
2

えーと…CSSだけ使ってみませんか？

#table tbody tr:hover {
    background-colour: #FFFACD;
}

編集：デモ付き

于 2011-06-02T13:15:09.953 に答える
1 
$('#table tbody tr').hover(
    function() {
        $(this).addClass('bgHvr');
    }, function() {
        $(this).removeClass('bgHvr');
    }
);
于 2011-06-02T13:12:29.323 に答える
1

私が知っている最善の方法であり、すべてのブラウザと完全に互換性があります。

順序付けられていないリスト-

JS

$('ul').delegate('li', 'mouseenter mouseleave', function() {
  $(this).toggleClass('hover');
});

CSS

li.hover {
  background-color: #CCC;
}
于 2011-06-02T13:29:36.460 に答える