[CSS] 하이퍼링크 글자색을 바꾸자(클릭 중/전/후, 마우스오버)

 

a:link { color:pink; }

아직 방문하지 않은 링크의 글자색을 정의합니다.

 

a:visited { color:black; }

사용자가 방문한 적이 있는 링크의 글자색을 정의합니다.

 

a:hover { color:red; }

마우스를 링크에 올려두었을 때, 글자색을 정의합니다.

 

a:active { color:green; }

마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의합니다.

 

 

 

 

이렇게 링크의 스타일을 정의하는 link, visited, hover, active 클래스를 사용할 때는

작성 순서에 주의해야 합니다.

• a:hover는 a:link, a:visited 뒤에 와야 합니다.
• a:active는 a:hover 뒤에 와야 합니다.

정리하면

• a:link, a:visited, a:hover, a:active (LVHA) 순서로 배치해야 합니다.

 

---

 

▶ hover 시간 조절 delay, duration

-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 5s; /* Safari */
-webkit-transition-delay: 2s; /* Safari */
transition-property: width;
transition-duration: 5s;
transition-delay: 2s;

-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 1s; /* Safari */
transition-property: width;
transition-duration: 1s;

 

• delay :기다리는 시간
• duration : 변화되는 시간

 

{
	transition-duration: 0.4s;
}