테이블위로 마우스 커서 이동시 색깔 변경하기

테이블위로 마우스커서가 이동될때 각 행을 지나갈 때마다 하이라이트되게 하려면 CSS 에서 간단하게 해결할 수 있습니다. 방법은 아래와 같이 TR 태그에 hover 에 컬러를 지정해주기만 하면 됩니다.

tr.attention:hover {background: #BBBBFF;}


그런데, 이 방법에는 한가지 문제점이 있는데 행수가 많아지면 마우스 이동시 색변경이 늦어집니다. 그래서, 자바스크립트(jQuery)로 구현해보았습니다. jQuery 의 hover 함수를 이용한 것입니다.

$(document).ready(function() {
  $("tr.attention").hover(
    function(){$(this).css("background","#BBBBFF")}, 
    function(){$(this).css("background","#FFFFFF")}
  );
});


한 줄로 간단하게 구현이되지만, 역시 느렸습니다. 그래서, 직접 mouseover 와 mouseout 이벤트를 이용하여 구현해보았습니다.

var color_old;
$(document).ready(function() {
  $("tr.attention").bind('mouseover', function(event){
    color_old = $(this).css('background-color');
    $(this).css('background-color', '#BBBBFF');
  });
  $("tr.attention").bind('mouseout',  function(event){
    $(this).css('background-color', color_old);
  });
});


이와 같이 해보니, 사용에 문제가 없을 정도로 빨라졌네요. 더 좋은 방법도 있을까요? 아시는 분은 댓글 남겨주셔요. ^^