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

1. :hover 예제 - :link, :visited, :hover 선택자 올바른 순서
2. :hover 정의
3. :hover 주의1 - :hover 선택자는 반드시 :link 선택자 뒤에 배치
4. :hover 주의2 - :hover 선택자는 input 요소에도 사용 가능
5. :hover 주의3 - IE브라우저까지 hover 효과 주려면 DTD 선언하거나, a 태그 이용
6. :hover 예제 - 링크 무지개 애니 효과
7. :hover 예제 - Tooltip (툴팁) 효과

:hover 예제 - :link, :visited, :hover 선택자 올바른 순서 

 

<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.

a:link, a:visited, a:hover, a:active 순서로 배치해야 함.

• a:link 선택자 - 링크 기본색
• a:visited 선택자 - 클릭해서 이미 방문한 링크 색
• a:hover 선택자 - 마우스가 링크 위에 올라갈 때 색
• a:active 선택자 - 링크 클릭하는 순간의 색

2.
CSS 버전 : CSS1

3.

• IE7 이상 주요 최신브라우저 모두 지원.
• IE 경우, hover 선택기가 <a> 요소 이외 다른 요소에서 작동하도록 <! DOCTYPE> 선언 필요. 

 

:hover 주의1 - :hover 선택자는 반드시 :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>

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

결과보기

:hover 주의2 - :hover 선택자는 input 요소에도 사용 가능

※ input:focus 에서 함께 설명

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

:hover 주의3 - IE브라우저까지 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>

 

결과보기