CSS 요소 특수 상태 / 마우스 반응

 

마우스에 반응하는 요소의 특수 상태. 말이 참 어렵다. 공부하면서 가끔 느끼는데 말을 왜이리 어렵게 하나? 라고 느낄 때가 있다. 그러나 그 말을 다르게 표현할 방법은 나도 모르겠음. 그냥 마우스에 반응하는 요소? 정도로 해도 괜찮을 것 같다. 아~몰랑~

 

마우스에 반응 한다하면 보통 글자색이나 배경색이 변하거나 뭔가 생겼다가 없어지고 이런거.

a:link, visited, hover, active

 

마우스에 반응하는 요소중 대표적인게 a요소다.

a는 링크요소다.

<a src="url">~</a>

 

link : 링크가 걸린 내용(글)의 색.

visited : 방문한 링크의 색.

hover : 마우스가 올라갔을 때 링크의 색.

active : 마우스를 클릭 했을 때 링크의 색.

 

참고로 각 태그는 쓰는 순서가 있다. link, visited, hover, active 순으로 써야한다.

 

 

 

class를 이용한 hover

 

 

a 값에 class를 주고 hover 값을 주는 방법은 a.classname:hover라고 쓰면 된다.

마우스를 올렸을 때 배경색 변화

 

 

div:hover

 

 

마우스를 올렸을 나타나는 요소

 

 

display: none; / block; 를 이용해 보였다 안 보였다.