CSS에서 마우스 오버(호버) 시 링크의 스타일을 변경하려면 :hover 선택자를 사용합니다. 이 가상 클래스는 사용자가 마우스 커서를 요소 위에 올려놓았을 때 해당 요소에 스타일을 적용해 줍니다.
아래 예제 코드를 실행하고, 링크 위에 마우스 커서를 올려보면 배경색이 주황색으로 바뀌는 효과를 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<a href = "https://www.google.com">Google</a>
<p>위 링크에 마우스 커서를 올려두고 효과를 확인해 보세요.</p>
</body>
</html>추가 팁: 다양한 호버 효과
:hover 선택자는 배경색 외에도 글자색, 밑줄, 크기 등 다양한 속성과 함께 활용할 수 있습니다.
a:hover {
color: white;
background-color: orange;
text-decoration: none;
}링크 상태별 스타일 함께 사용하기
실무에서는 :hover와 함께 아래의 링크 상태 선택자들을 조합하여 사용하는 것이 일반적입니다.
- a:link — 방문하지 않은 기본 링크 스타일
- a:visited — 이미 방문한 링크 스타일
- a:hover — 마우스 커서를 올렸을 때의 스타일
- a:active — 클릭하는 순간의 스타일
이때 CSS 규칙은 LVHA 순서(link → visited → hover → active)로 작성해야 의도대로 동작합니다.