[jQuery] テーブルのマウスオーバーした1行の背景色を変える

jQueryを使ってテーブルの行を変える。

#コード

jQuery 1.9.0からhover()が非推奨にとかいう話を聞いたりしていたけど、.hover()が非推奨になったわけではないので注意。

廃止になったのはhoverメソッドではなく擬似イベントとして定義されている「hover」、jQuery 1.9.0未満では以下のコードが動作していたが、これが動作しなくなったというわけです。

$(".hoge").on("hover",function(){
	//do something
});

参考元にもある通り、mouseenter,mouseleaveで書いたほうが何かと都合がいいのでそっちで書くことにする

#jQuery

$("table").find("tr").on({
  'mouseover': function(e) {
    $(this).addClass('highlight');
  },
  'mouseout': function(e) {
    $(this).removeClass('highlight');
  }
});

#CSS

.highlight {
  background: #edb9de;
}

#旧コード

#jQuery

$('table').find("tr").hover(function(){
  $(this).toggleClass('highlight');
});

#CSS

.highlight {
  background: #edb9de;
}
twitterfacebookhatenafacebook