c CSS

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

23,182

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

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

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>

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

결과보기

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

결과보기