이..이걸 팁이라고해야 할지 잘 모르겠네요..ㅎㅎ
어째든 간단히 정리하면..
리스트가 뿌려진 상태에서 리스트 안에서 마우스가 움직이면 마우스따라 선택된 "tr" 영역이 선택안된 "tr"영역과 색이 틀려지는
소스입니다..
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery("td").mouseover(function(){
var obj = jQuery(this).parent();
obj.attr("id","sub");
});
jQuery("td").mouseout(function(){
var obj = jQuery(this).parent();
obj.attr("id","");
});
</script>
여기서 봐야할건 빨간 바탕이겠죠..
대분분 css는 한대 모아서 정리 후 include 하기 때문에 id = "sub" <= 여기 sub만 수정하시면 되겠죠. ^^
제가 attr속성에 대해 잘몰라서 서너시간 헤매다가 만들었습니다..
너무 간단하고 기본적인것인데 이런것 때문에 시간 소비하지 마시라고 올려봅니다. ^^
CSS 에 동적 효과를 주기 원하신다면 ID 속성보다 class 속성을 주는 것이 여러모로 편리합니다.
또한 제이쿼리는 마우스 오버와 아웃을 한꺼번에 관리하는 hover 메서드를 제공합니다.
jQuery("td").hover(function(){ jQuery(this).parent().addClass('sub'); },function(){ jQuery(this).parent().removeClass('sub'); });이후 CSS 에서
.sub { background-color: red; }이렇게 주시면 class 에 sub 가 들어간 모든 TD 태그에 빨간 배경이 입히는 거죠
도움 되시기 바랍니다.