마우스 오버시 테두리선 색 바꾸기 > html

마우스 오버시 테두리선 색 바꾸기

TABLE이나 TD 태그나 마우스 오버시 테두리선의 색을 바꾸고 다시 마우스 아웃시 원래의 색으로 되돌리기

[첫번째 직접 색상을 적용하는 경우]

적용할 테이블이나 TD 태그에 style="border:1px solid #DDDDDD;" onMouseOver="this.style.border='1px solid #000000'" onMouseOut="this.style.border='1px solid #DDDDDD'" 를 붙여 넣고 원하는 색상으로 바꾸세요

style="border:1px solid #DDDDDD;" 는 1픽셀 짜리 #DDDDDD 색상의 테두리선이 나타나도록 합니다.
onMouseOver="this.style.border='1px solid #000000'" 마우스 오버시 테두리선의 색상이 검은색으로 바뀌도록 합니다.
onMouseOut="this.style.border='1px solid #DDDDDD'" 마우스 아웃시 다시 원래의 선 색상이 나타나도록 합니다.

[적용예]
<td align="center" height="100" style="border:1px solid #DDDDDD;" onMouseOver="this.style.border='1px solid #000000'" onMouseOut="this.style.border='1px solid #DDDDDD'">



[두번째 직접 색상을 적용하는 경우]

클래스 이름을 지정해서 색상을 적용하는 경우로 직접 색상을 적용하는 것보다 장점은 색상을 변경시 스타일 시트의 색상만 바꾸어 주면 쉽게 바꿀수 있습니다.

먼저 클래스를 아래처럼 정의해놨다면
<style type="text/css">
.border1 { border:1px solid #DDDDDD; }
.border2 { border:1px solid #000000'; }
</style>

적용할 테이블이나 TD 태그에 class="border1" onMouseOver="this.className='border2';" onMouseOut="this.className='border1'" 를 붙여 넣고 원하는 색상으로 바꾸세요