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 상태로 간주됩니다.