• 회원가입
  • 로그인

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

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

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012