개인 프로젝트/외주 홈페이지 만들기

[html, css] Text에 마우스 오버 효과주기

개발자_이훈규 2015. 6. 12. 01:38



출처 : http://tip.daum.net/openknow/45100160?category_id=OCL



css로 클래스 이름을 줘서 해결한다.




오픈지식 [드림위버] 텍스트위에 마우스 오버시 다른색상 표현하기 우리는 흔히 텍스트위에 마우스 오버시 다른색상으로 표현하는 내용은 버튼으로 만든 후 a:hover 를 적용해야한다고 알고있습니다.
그러나 그렇지 않습니다.
CSS 를 선언하고 원하는 부분에서 className 로 선언하면 간단히 해결이 된답니다.
아래의 내용을 참고하세요.


<HEAD> 부분에 넣어줄 내용입니다.

<style type="text/css">
<!--
.fontup {color:#666666;}
.fontover {color:#CC3333;}
-->
</style>

<BODY> 부분중 원하는 내용에 아래와같이 표현합니다.

<span onMouseOver="this.className='fontover'" onMouseOut="this.className='fontup'">다음과 함께하는 드림위버 공부방</span>