웹 페이지에서 링크에 마우스 포인터를 올렸을 때 색상이 바뀌는 효과를 보신 적이 있으실 겁니다. 이러한 인터랙티브한 효과는 CSS의 :hover 가상 클래스(pseudo-class)를 사용하면 간단하게 구현할 수 있습니다.
:hover란 무엇인가?
:hover는 사용자가 해당 요소 위에 마우스 커서를 올려놓았을 때 스타일을 적용하는 CSS 선택자입니다. 링크뿐만 아니라 버튼, 이미지 등 다양한 요소에 활용할 수 있으며, 사용자에게 시각적인 피드백을 제공하여 웹사이트의 사용성을 높여줍니다.
예제 코드
아래 예제 코드를 실행하면 링크에 마우스를 올렸을 때 노란색(#FFCC00)으로 색상이 변경되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
a:hover {
color: #FFCC00
}
</style>
</head>
<body>
<a href = "">My Link</a>
</body>
</html>코드 설명
a:hover { color: #FFCC00; } 구문은 모든 <a> 태그(링크)에 마우스가 올라갔을 때 글자색을 #FFCC00(노란색 계열)으로 변경하겠다는 의미입니다. 원하는 다른 색상 코드나 폰트 크기, 밑줄 스타일 등을 함께 지정하면 더욱 풍부한 효과를 낼 수 있습니다.
참고로, 링크의 기본 상태에는 a:link, 방문한 링크에는 a:visited, 클릭하는 순간에는 a:active 가상 클래스를 사용할 수 있으며, 일반적으로 :link → :visited → :hover → :active(LVHA) 순서로 선언하는 것이 권장됩니다.