[hover]hover에 대하여

AeRi Lee·2020년 2월 23일

:hovercss 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 뜻한다.
쉽게는 사용자의 커서(마우스의 포인터)가 요소에 올라가 있을 때 적용된다.

a:hover {
  color: orange;
}

hover를 사용할 때 중요한 것은 다른 링크 의사 클래스가 덮어 쓸 수 있다는 것이다.

:hover 의사 클래스로 정의한 클래스는 자신보다 뒤에 있으면서 같은 역할을 하는 다른 링크 의사 클래스(:link, :visites, :active) 가 덮어쓴다.

링크를 적적히 디자인 하려면 LVHA순서
:linkㅡ :visited ㅡ :hover ㅡ :active
를 따라서

:hover 규칙을 :link와 :visited뒤, :active 앞에 배치해야 한다.

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

예제.

HTML

<a href = "#">이 링크를 가리켜 보세요.</a>

CSS

a { 
   background-color: powderblue;
   transition: background-color .5s;
}

a:hover{
  background-color: gold;
}

그냥 있는 상태,

링크에 커서를 두었을 때,

그렇다면 다른 링크 의사 클래스란 무엇일까?

1.:link

:link css 의사 클래스는 아직 방문하지 않은 요소를 타나낸다.
href 속성을 가진

<a>, <area>, <link>

중 방문하지 않은 모든 요소를 선택한다.

/* 아직 방문하지 않은 <a> 요소를 선택 */
a:link {
  color: red;
}

방문 여부에 상관하지 않고 요소를 선택하려면 :any-link를 사용하자.

예제

HTML

<a href ="#normal-target"> 평범한 링크입니다. </a><br>
<a href ="">이 링크는 이미 방문했습니다.</a><br>
<a> 플레이스홀더 링크(스타일 적용 안됨)</a>

CSS

a:link {
   background-color: gold;
   color: green;
}

실수로 방문해버려서 색이 변했지만... 첫 번째 링크는 원래 글씨가 초록색이었고, 방문을 하니까 저렇게 보라색으로 바뀌었다. 두 번째 링크는 보라색이었다.

2.:active

사용자가 활성화한 요소(ex 버튼)를 나타낸다. 마우스를 사용한 경우, 활성 이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.

/* 활성화된 모든 <a> 태그를 선택*/
a:active{
  color: red;
}

:active는 대게

<a>, <button>

과 함께 사용한다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 <label>로 선택한 입력 폼 요소 등이 있다.

:active규칙은 다른 모든 링크 규칙들보다 뒤에 배치해야 한다.

CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 :active 의사 클래스는 주 버튼에만 적용되어야 한다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼이다.

예제

HTML

<p>링크를 포함하는 문단입니다.
<a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a>
이 문단은 클릭하는 동안 배경색이 회색이 됩니다.
</p>

CSS

a:link { color: blue; } /* 방문하지 않은 링크*/
a:visited { clolor: purple; }/*방문한 링크*/
a:hover { background: yellow; }/*마우스 올린 링크*/
a:active { color: red; }/*활성화한 링크*/
p:active {background: #eee; }/*활성화한 문단*/

클릭하는 동안 이 상태이다.

클릭하고 나서 상태.

활성화 폼 요소

HTML

<form>
  <label for="my-button"> 내 버튼: </label>
  <button id="my-button" type="button"> 제 라벨이나 저를 클릭해보세요! </button>
</form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

아무것도 하지 않았을 때,

내 버튼까지 클릭했을 때,

버튼만 클릭했을 때,

3.:visited

사용자가 방문한 적이 있는 링크를 나타낸다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적이다.

/* 방문한 적이 있는 <a> 선택 */
a:visited {
  color: green;
}

:visited 규칙은
:link 뒤,
:hover , :active 앞에 배치해야 한다.

스타일 제한

브라우저는 개인정보 보호를 위해 :visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있다.

사용가능한 css 속성 : color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color 이다.
사용 가능한 SVG 속성은 fill과 stroke이다.
허용가능한 속성의 알파 채널 값은 무시하고, 대신 :visited 가 아닐 떄의 알파 채널을 사용한다. 단, 그 값이 0일 땐, :visited의 스타일을 모두 무시한다.
사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 떄도, window.getComputedStyle() 메서드는 거짓으로라도 항상 :visited가 아닐 떄의 스타일을 반환한다.

스타일 제한에 관해 더 많은 정보과 이유에 대해서 mdn에 개인정보와 :visited 선택자 문서를 참고하자.

HTML

<a href ="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br>
<a href = "">이미 방문했습니다.</a>

CSS

a {
 /* 특정 속성에 투명하지 않은 기본값을 지정해 :visited 상태로 바꿀 수 있도록 설정 */
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}