테이블위로 마우스커서가 이동될때 각 행을 지나갈 때마다 하이라이트되게 하려면 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); }); ...
댓글
댓글 쓰기