CSS :hover 가상 클래스 선택자 사용 방법

`:hover` 가상 클래스

:hover 가상 클래스 선택자는
요소에 마우스를 올려 놓았을 동안 해당 요소를 선택합니다.
사용자가 마우스로 요소 위에 올려 놓았을 동안에만 미리 정의된 스타일이 적용되기 때문에 인터랙티브하고 동적인 사용자 경험을 제공할 수 있습니다.

요소에 마우스를 올려 놓은 상태를 CSS에서 통상적으로 '호버(hover)' 상태라고 부릅니다.

예제

CSS

button {
    color: white;
    padding: 0.8em 1.5em;
    background-color: orange;
    border: none;
    border-radius: 5px;
}
button:hover { /* 버튼에 마우스를 올려 놓았을 때에만 배경색을 변경 */
    background-color: gray;
}

이 예제에서는 버튼 요소에 마우스를 올려 놓았을 동안에만 배경색이 orange에서 gray으로 변경됩니다.

:hover 가상 클래스의 형식은 다음과 같습니다.

구문

주의할 점

:hover 가상 클래스로 정의한 스타일은
자신보다 뒤에 위치하고 적어도 동일한 구체성 값(명시도)을 가진 다른 상태에 관련된 가상 클래스(:link, :visited)가 덮어씁니다. 또한, :active가 :hover 앞에 배치되어 있을 경우에는 :hover가 :active를 덮어씁니다.

알아두세요!
상태에 관련된 가상 클래스 선택자인 :link, :visited, :hover, :active는 스타일시트에서 배치 순서가 정해져 있습니다. 그래야 유효하게 작동합니다.
LoVe HAte 순서(:link → :visited → :hover → :active)라고 기억하면 쉬운데, 이 순서대로 배치하지 않으면 후순위가 선순위보다 먼저 배치되어 있을 경우 해당 후순위는 이 후에 배치되는 선순위가 스타일을 덮어씁니다.

따라서, 상태와 관련된 가상 클래스들과 적절하게 스타일하려면 LoVe HAte 순서(:link → :visited → :hover → :active)를 따라, :link 및 :visited 뒤에 :hover를 배치하고 :active 앞에 배치해야 합니다.

:active는 요소에 마우스를 올려 놓은 상태에서 마우스 버튼을 누르는 순간부터 떼는 시점까지 선택하는 가상 클래스입니다.

다음은 LoVe HAte 순서와 다르게 :active가 :hover 앞에 배치되어 있어서 :hover가 :active를 덮어쓰는 예제입니다.

CSS

button {
    color: white;
    padding: 0.8em 1.5em;
    background-color: orange;
    border: none;
    border-radius: 5px;
}
button:active { /* button:hover가 배경색 설정을 덮어쓰기를 하기 때문에 적용되지 않음 주의! */
        background-color: black;
    }
button:hover {
    background-color: gray;
}

위 예제를 보면, :active가 :hover 앞에 배치되어 있어서 button:hover에서 선언한 버튼의 색(gray)이 사용자가 버튼에 마우스를 올려 놓은 상태에서 마우스 버튼을 누르는 순간부터 떼는 시점까지 선택되는 button:active에서 선언한 버튼의 색(black)을 덮어쓰기하기 때문에 button:active에서 선언한 버튼의 색(black)이 적용되지 않음을 주의해야 합니다.

다음은 LoVe HAte 순서대로 :hover가 :active 앞에 배치되어 있어서 올바르게 스타일이 적용되는 예제입니다.

CSS

button {
    color: white;
    padding: 0.8em 1.5em;
    background-color: orange;
    border: none;
    border-radius: 5px;
}
button:hover {
    background-color: gray;
}
button:active {
    background-color: black;
}

알아두세요!
마우스를 사용하지 않는 모바일과 같은 터치스크린에서는 :hover와 :active를 같이 사용하여 스타일 할 경우에 동작이 브라우저마다 다를 수 있으며, 제한적이거나 의도한 대로 작동하지 않을 수 있습니다.

HTML5에서 레이블에 호버 시 컨트롤 요소의 `:hover` 상태 적용

HTML5에서는 레이블된 컨트롤 요소가 있습니다. 예를 들어, <label> 요소로 <input> 요소를 레이블링할 수 있습니다. HTML5의 규칙에 따르면, 사용자가 <label> 요소를 호버할 때, 해당 라벨이 가리키는 <input> 요소도 :hover 상태로 간주됩니다.