<style>
a:link {color: blue; text-decoration: none;}
a:visited{color: purple; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
</style>
<a href="#">홈짱닷컴 Homzzang.com</a>
링크에 마우스커서 접근 X : a:link 스타일 영향 받아 파란색
링크에 마우스커서 접근 O : a:hover 스타일 영향으로 붉은색 및 밑줄이 생김.
:hover 정의
1.
링크 위에 마우스 커서를 올려놓을 때의 스타일 줄 때 사용
2.
CSS 버전 : CSS1
3.
IE7 이상 주요 최신브라우저 모두 지원.
IE 경우, hover 선택기가 <a> 요소 이외 다른 요소에서 작동하도록 <! DOCTYPE> 선언 필요.
:hover 주의1 ★
a:hover 스타일은 반드시 a:link 스타일 뒤에 와야 함.
아래처럼 a:link 앞에 오면 적용이 안됨.
<style>
a:hover {color: red; text-decoration: underline;}
a:link {color: blue; text-decoration: none;}
a:visited{color: purple; text-decoration: none;}
</style>
:hover 주의2
:hover 선택자는 input 요소에도 사용 가능.
※ input:focus 에서 함께 설명
http://www.homzzang.com/css/23
:hover 주의3 ★
익스플로러까지 hover 효과를 주려면 DTD를 선언하거나, a 태그 이용해야 함.
a:hover
input:hover
위 두 가지 경우를 제외하고,
나머지 경우엔 IE 쿼크모드 (=DTD 선언 안된 상태)에서 작동 안 됨.
물론, 크롬, 파이어폭스, 오페라 등 주요 브라우저에서는 정상 작동.
:hover 예제 - 링크 무지개효과
<style>
a:hover, a:focus {
animation-duration: 3s;
animation-name: rainbowLink;
animation-iteration-count: infinite;
}
@keyframes rainbowLink {
0% { color: #ff2a2a; }
15% { color: #ff7a2a; }
30% { color: #ffc52a; }
45% { color: #43ff2a; }
60% { color: #2a89ff; }
75% { color: #202082; }
90% { color: #6b2aff; }
100% { color: #e82aff; }
}
</style>
<a href="https://homzzang.com/" target="_blank">Homzzang.com 바로가기</a>
결과보기
:hover 예제 - Tooltip (툴팁) 효과
<style>
.intro {
display: none;
}
.hz:hover + .intro {
display: block;
color: red;
}
</style>
<div class="hz">홈짱닷컴 Homzzang.com</div>
<div class="intro">홈페이지 제작관리 강의</div>
결과보기
