css hover

hover 정의 및 사용법

:hover 선택기는 요소 위에 마우스를 놓을 때 요소를 선택하는데 사용됩니다.

a:hover{
	background-color: yellow;
}    

🍭Tip : 방문하지 않은 페이지에 대한 링크의 스타일을 지정하려면 :link 선택기를 사용하고, 방문한 페이지에 대한 링크의 스타일을 지정하려면 :visited 선택기를 사용하고, 활성 링크의 스타일을 지정하려면 :active 선택기를 사용합니다.

🍭Tip : 링크를 적적히 디자인 하려면 LVHA순서 즉, :link-:visited-:hover-:active 를 따라서 배치해야 한다. 그래야 효과적이다!!

/ mouse over link /
a:hover {
color: red;
}

💡 참고 : :hover 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.

link,visited,active란 무엇인가?

1. :link

:link 는 아직 사용자가 방문하지 않은 요소를 나타낸다.

► 링크를 가진 a 요소에 적용 (href="" 가 없는 a는 적용되지 않는다)

a:link {
  color: green;
}

결과는 👇🏻👇🏻

2. :visited

:visited 는 사용자가 방문한 후 링크의 상태이다.

/* visited link */
a:visited {
  color: blue;
}

결과는 👇🏻👇🏻

3. :active

사용자가 링크를 클릭할때 나타나는 요소이다.
:hover와 같이 :avtive도 링크 외에 모든 요소에 적용 가능하다.

/* selected link */
a:active {
  color: yellow;
}

결과는 👇🏻👇🏻