:hover 가상 클래스란?
CSS의 :hover 가상 클래스(pseudo-class)는 사용자가 마우스 포인터를 요소 위에 올렸을 때 해당 요소에 특별한 스타일을 적용할 수 있게 해주는 선택자입니다. 주로 링크나 버튼에 마우스를 올렸을 때 색상이 바뀌거나 강조 효과가 나타나도록 하는 데 널리 사용됩니다.
적용할 수 있는 값에는 제한이 없으며, 색상 이름, HEX 코드(#FFCC00), RGB, HSL 등 유효한 형식이라면 어떤 것이든 사용할 수 있습니다.
기본 예제
아래 예제는 링크(<a> 태그)에 마우스를 올렸을 때 글자 색상이 변경되도록 설정한 코드입니다.
<html>
<head>
<style>
a:hover {
color: #FFCC00;
}
</style>
</head>
<body>
<a href="#">여기로 마우스를 가져오세요</a>
</body>
</html>실행 결과
브라우저에서 위 코드를 실행하면 일반적인 상태에서는 기본 링크 색상이 표시되지만, 마우스 포인터를 링크 위에 올리는 순간 글자 색이 #FFCC00(밝은 노란색 계열)으로 즉시 변경됩니다. 마우스를 치우면 원래 색상으로 되돌아갑니다.
활용 팁
- 다양한 속성 조합: :hover에는 color뿐만 아니라 background-color, font-size, text-decoration, transform 등 거의 모든 CSS 속성을 적용할 수 있습니다.
- 부드러운 전환 효과: transition 속성을 함께 사용하면 hover 시 스타일이 자연스럽게 변하도록 만들 수 있습니다.
- 모바일 환경 주의: 터치 기기에서는 hover 상태가 제대로 작동하지 않거나 탭 시에만 잠깐 적용되므로, 모바일 대응이 필요하다면 별도의 스타일 처리를 고려해야 합니다.