td 색깔 변경시키기..
dev | 2004-02-23
<pre class="code"><style type="text/css">
td.mouseOver {
background: #f7f7f7;
}
td.mouseOut {
background: #fff;
}
</style></pre>로 선언해 주시고요..<pre class="code"><td onMouseOver="this.className='mouseOver';" onMouseOut="this.className='mouseOut'"></pre>으로 하시면 됩니다.
IE 에서는 이 방법밖에 없는 것 같고요....
FireFox 에서는 <pre class="code">setAttribute("class","myClass");</pre>를 사용할 수 있습니다.
스크립트에 this.onMouseOut="myMouseOutFunction();" 을 추가해 주면 td 에는 그냥<pre class="code"><td onMouseOver="myMouseOverFunction();"></pre>와 같이만 해주어도 나머지 마우스 아웃이 script 로 구현이 되기 때문에 소스가 아주 간단해 지지요!! 그러나 현실적으로는 IE 에서 지원이 안되기 때문에 사용 불가능 합니다. ㅜㅜ
또 하나 재미 있는 것은요... 만약 색을 바꿔야 하는 td 의 내용이 글씨 뿐이라면.. :hover 슈도엘리먼트를 쓸 수 있습니다. <pre class="code">a:link, a:visited {
display: block;
background: #fff;
}
a:hover {
display: block;
background: #f7f7f7;
}</pre>하시면 td 를 사용하지 않고서도 anchor 를 display: block 으로 바꾸고 width 와 height 를 주면 pure CSS 로 script 를 쓴것 과 같은 효과를 줄 수 있습니다.
Comments