게시글 제목 마우스오버시 배경색이 바뀌는 효과 정보
게시글 제목 마우스오버시 배경색이 바뀌는 효과본문
http://www.ggaeal.com/bbs/board.php?bo_table=humor
위 게시판처럼 게시글 제목에 마우스를 갖다대면 색이 바뀌는 효과에 대해 묻고싶습니다.
style.css 손대면 된다는데 구체적으로 어떻게?
참고로 배추베이직 사용중입니다.
위 게시판처럼 게시글 제목에 마우스를 갖다대면 색이 바뀌는 효과에 대해 묻고싶습니다.
style.css 손대면 된다는데 구체적으로 어떻게?
참고로 배추베이직 사용중입니다.
댓글 전체
<div class="list">내용</div>
.list {
background: #fff;
}
.list:hover {
background: #000;
}
.board_list tr.bg1 { background:#ffffff; }
.board_list tr.bg1:hover { background:#fbfbfb; }
.board_list tr.notice { background-color:#f4f7fc; }
수정했는데 안 되네요.
.board_list tr.bg1:hover { background:#fbfbfb; }
.board_list tr.notice { background-color:#f4f7fc; }
수정했는데 안 되네요.
table row 는 css 로 먹이는게 아니구요, (제가 알기로는 어떤 경우에도 legacy 브라우저 (IE 란 얘깁니다. ㅎㅎ 한국은 IE 하위 버전이 중요하죠. ^^) 에서는 css 로 안되는걸로 알고 있습니다.)
자스로 먹이셔야 합니다.
reference 하신 저 사이트에서는
onmouseover="this.style.backgroundColor="#f2f0f;" onmouseout="this.style.backgroundColor="#ffffff"
이런식으로 자스로 background-color 를 마우스 오버시 색상을 바꾸고 있구요, jQuery 로 function 을 짜는 방법도 있습니다.
이런식으로.
$(function() {
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
} else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
});
암튼 css 로는 해결방법이 아닙니다.
자스로 먹이셔야 합니다.
reference 하신 저 사이트에서는
onmouseover="this.style.backgroundColor="#f2f0f;" onmouseout="this.style.backgroundColor="#ffffff"
이런식으로 자스로 background-color 를 마우스 오버시 색상을 바꾸고 있구요, jQuery 로 function 을 짜는 방법도 있습니다.
이런식으로.
$(function() {
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
} else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
});
암튼 css 로는 해결방법이 아닙니다.
