CSS의 :hover 선택자는 사용자가 마우스 커서를 요소 위에 올렸을 때 스타일을 적용할 수 있게 해주는 강력한 도구입니다. 특히 링크(<a> 태그)에 마우스를 올렸을 때 배경색이나 글자색을 변경하는 인터랙티브 효과를 손쉽게 구현할 수 있습니다.
:hover 선택자란?
:hover는 CSS 의사 클래스(pseudo-class) 중 하나로, 마우스 포인터가 해당 요소 위에 위치하는 순간 지정한 스타일이 자동으로 적용됩니다. 버튼, 링크, 메뉴 항목 등 다양한 요소에 활용되며, 별도의 JavaScript 없이도 동적인 사용자 경험을 만들 수 있다는 점이 큰 장점입니다.
기본 예제
아래 코드는 링크에 마우스를 올리면 배경색이 주황색으로 바뀌는 예제입니다. 직접 실행해 보고 마우스 커서를 링크 위에 올려보세요.
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<a href = "https://www.qries.com">Qries</a>
<p>위 링크에 마우스 커서를 올려두고 효과를 확인해 보세요.</p>
</body>
</html>코드 설명
- a:hover – 모든
<a>요소에 마우스가 올라갔을 때 적용될 스타일을 정의합니다. - background-color: orange; – 마우스 오버 시 배경색을 주황색으로 변경합니다.
다양하게 응용하기
배경색 외에도 글자색, 밑줄, 그림자, 크기 변화 등 원하는 CSS 속성을 자유롭게 조합할 수 있습니다. 예를 들어 다음과 같이 작성하면 더욱 풍부한 효과를 낼 수 있습니다.
a:hover {
color: white;
background-color: orange;
text-decoration: none;
}모바일 기기에서는 터치 환경의 특성상 hover 효과가 제대로 작동하지 않을 수 있으므로, 반응형 디자인 시에는 이 점을 고려하는 것이 좋습니다.