테이블위로 마우스커서가 이동될때 각 행을 지나갈 때마다 하이라이트되게 하려면 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); }); });
이와 같이 해보니, 사용에 문제가 없을 정도로 빨라졌네요. 더 좋은 방법도 있을까요? 아시는 분은 댓글 남겨주셔요. ^^
'ETC > IT' 카테고리의 다른 글
IE 의 TEXTAREA 에서 개행처리 (0) | 2009.06.25 |
---|---|
아웃룩 2007 로딩시 먹통 되는 현상 (0) | 2009.06.17 |
jQeury 정말 좋네요. *^^* (0) | 2009.06.03 |
서버 벤더별 RAID 비교 (0) | 2009.02.18 |
.NET을 다시 알다 (0) | 2008.12.08 |