[selector] CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자, 링크선택자) + 링크무지개효과 + Tooltip (툴팁) 효과

 

<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 스타일 영향으로 붉은색 및 밑줄이 생김. 

 

 
1.

 링크 위에 마우스 커서를 올려놓을 때의 스타일 줄 때 사용

 
2.
CSS 버전 : CSS1

3.
IE7 이상 주요 최신브라우저 모두 지원.

IE 경우, hover 선택기가 <a> 요소 이외 다른 요소에서 작동하도록 <! DOCTYPE> 선언 필요. 

 

 
<style>

a:hover {color: red; text-decoration: underline;}

a:link {color: blue; text-decoration: none;}

a:visited{color: purple; text-decoration: none;}

 

</style>

<a href="#">홈짱닷컴</a>  

 

결과보기

http://www.homzzang.com/css/23

 

 a:hover 

 input:hover

 

위 두 가지 경우를 제외하고, 
나머지 경우엔 IE 쿼크모드 (=DTD 선언 안된 상태)에서 작동 안 됨.

물론, 크롬, 파이어폭스, 오페라 등 주요 브라우저에서는 정상 작동.