테이블위로 마우스 커서 이동시 색깔 변경하기
테이블위로 마우스커서가 이동될때 각 행을 지나갈 때마다 하이라이트되게 하려면 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);
});
});
이와 같이 해보니, 사용에 문제가 없을 정도로 빨라졌네요. 더 좋은 방법도 있을까요? 아시는 분은 댓글 남겨주셔요. ^^
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);
});
});
이와 같이 해보니, 사용에 문제가 없을 정도로 빨라졌네요. 더 좋은 방법도 있을까요? 아시는 분은 댓글 남겨주셔요. ^^
댓글
댓글 쓰기