td 색깔 변경시키기..

February 23, 2004 04:31 PM

<style type="text/css">
td.mouseOver {
    background: #f7f7f7;
}
td.mouseOut {
    background: #fff;
}
</style>
로 선언해 주시고요..
<td onMouseOver="this.className='mouseOver';" onMouseOut="this.className='mouseOut'">
으로 하시면 됩니다.

IE 에서는 이 방법밖에 없는 것 같고요....

FireFox 에서는

setAttribute("class","myClass");
를 사용할 수 있습니다.

스크립트에 this.onMouseOut="myMouseOutFunction();" 을 추가해 주면 td 에는 그냥

<td onMouseOver="myMouseOverFunction();">
와 같이만 해주어도 나머지 마우스 아웃이 script 로 구현이 되기 때문에 소스가 아주 간단해 지지요!! 그러나 현실적으로는 IE 에서 지원이 안되기 때문에 사용 불가능 합니다. ㅜㅜ

또 하나 재미 있는 것은요... 만약 색을 바꿔야 하는 td 의 내용이 글씨 뿐이라면.. :hover 슈도엘리먼트를 쓸 수 있습니다.

a:link, a:visited {
    display: block;
    background: #fff;
}
a:hover {
    display: block;
    background: #f7f7f7;
}
하시면 td 를 사용하지 않고서도 anchor 를 display: block 으로 바꾸고 width 와 height 를 주면 pure CSS 로 script 를 쓴것 과 같은 효과를 줄 수 있습니다.

Comments

Post a comment

:

: 공개 되지 않습니다. Gravata를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.