CSS :hover 셀렉터 완벽 가이드: 마우스 오버 효과 구현 방법

CSS의 :hover 셀렉터는 사용자가 마우스 커서를 요소 위에 올려놓았을 때 해당 요소를 선택하는 가상 클래스입니다. 예를 들어 링크에 마우스를 올렸을 때 링크 색상을 바꾸는 데 :hover를 활용할 수 있습니다.

웹 페이지를 만들다 보면 사용자가 특정 요소 위에 마우스를 올렸을 때 스타일이 자연스럽게 전환되기를 원하는 경우가 많습니다. 바로 이럴 때 CSS :hover 셀렉터가 필요합니다. :hover를 사용하면 마우스가 올라간 요소를 선택해 원하는 스타일을 적용할 수 있습니다.

이 글에서는 CSS 셀렉터의 기본 개념과 :hover 셀렉터의 사용법을 다양한 예제와 함께 살펴봅니다. 글을 끝까지 읽으면 :hover를 활용해 스타일을 적용할 요소를 자유자재로 선택할 수 있게 될 것입니다.

CSS 셀렉터 기초

CSS에서 셀렉터(selector)는 웹 페이지에서 스타일을 적용하고 싶은 HTML 요소를 선택하는 도구입니다. 셀렉터를 활용하면 요소의 id, class, 그룹, 속성 등을 기준으로 원하는 요소만 골라서 특정 스타일을 적용할 수 있습니다.

예를 들어, HTML 문서의 모든 <h1> 태그에 핫핑크(hotpink) 배경색을 지정하고 싶다면 다음과 같은 코드를 작성하면 됩니다.

h1 {
	background-color: hotpink;
}

위 코드에서는 <h1> 셀렉터를 사용해 웹 페이지의 모든 <h1> 태그를 선택했습니다. 그리고 중괄호({}) 안에 해당 태그에 적용할 스타일을 지정합니다.

CSS :hover 셀렉터란?

:hover 셀렉터는 사용자가 마우스를 요소 위에 올려놓았을 때 해당 요소를 선택합니다. 모든 CSS 요소에 사용할 수 있지만, 주로 링크(<a> 태그)에 많이 활용됩니다. :hover는 선택하려는 요소 이름 뒤에 붙여서 작성하며, 링크라면 a:hover처럼 표기합니다.

:hover 셀렉터가 유용하게 쓰이는 대표적인 상황은 다음과 같습니다.

사용자가 텍스트 위에 마우스를 올렸을 때 글자 색상 변경하기
이미지 위에 마우스를 올렸을 때 이미지 크기 변경하기
버튼 위에 마우스를 올렸을 때 버튼 색상 변경하기

모든 경우에 공통적으로, 사용자가 커서를 요소 위에 올려놓는 순간 특정 스타일이 적용됩니다.

:hover 셀렉터 문법

:hover 셀렉터의 기본 문법은 다음과 같습니다.

selector:hover {
	/* CSS 규칙 */
}

문법의 주요 구성 요소를 하나씩 살펴보겠습니다.

selector: :hover 효과를 적용할 요소의 범위입니다. 예를 들어 <h3> 요소에 마우스를 올릴 때마다 효과가 발생하길 원한다면 h3로 지정합니다.
:hover: 브라우저에게 해당 CSS 규칙이 사용자가 특정 요소 위에 마우스를 올리고 있는 동안에만 적용되어야 한다고 알려주는 역할을 합니다.
CSS 규칙: 사용자가 요소 위에 마우스를 올렸을 때 적용할 스타일입니다. 글자 크기, <div> 태그의 배경색, <input> 필드의 border-radius 등 원하는 속성을 자유롭게 지정할 수 있습니다.

그럼 몇 가지 예제를 통해 웹 개발 과정에서 :hover 셀렉터를 어떻게 활용할 수 있는지 살펴보겠습니다.

:hover CSS 실전 예제

:hover 셀렉터는 다양한 방식으로 활용할 수 있습니다. 아래에서 가장 자주 쓰이는 세 가지 시나리오를 예제와 함께 소개합니다.

예제 1: 링크 색상 변경하기

:hover 셀렉터를 사용하면 사용자가 링크 위에 마우스를 올렸을 때 링크 색상을 변경할 수 있습니다.

예를 들어 "Career Karma homepage"라는 텍스트를 담고, 클릭 시 Career Karma 사이트로 이동하는 링크를 만든다고 가정해 보겠습니다. 이 링크는 평소에는 연두색(lightgreen)으로 표시됩니다.

사용자가 링크 위에 마우스를 올리면 주황색(orange)으로 바뀌도록 만들고 싶다면 다음 코드를 사용할 수 있습니다.

<a href="https://careerkarma.com">Career Karma homepage</a>

<style>
a {
	color: lightgreen;
}

a:hover {
	color: orange;
}
</style>

코드를 하나씩 분석해 보겠습니다.

HTML에서는 <a> 태그로 Career Karma 홈페이지 링크를 정의했습니다. 그리고 CSS에는 두 가지 규칙이 있습니다.

첫 번째 규칙은 웹 페이지의 모든 <a> 태그에 적용되며, color 속성을 사용해 글자색을 lightgreen으로 설정합니다.

두 번째 규칙은 a:hover 셀렉터를 사용해, 사용자가 <a> 태그 위에 마우스를 올렸을 때 링크 색상을 주황색으로 변경합니다.

따라서 사용자가 "Career Karma homepage" 텍스트 위에 마우스를 올리는 순간 링크 색상이 주황색으로 바뀝니다.

예제 2: 마우스 오버 시 텍스트 블록 표시하기

:hover 셀렉터는 특정 텍스트 위에 마우스를 올렸을 때 숨겨진 텍스트 블록을 보여주는 데도 활용할 수 있습니다.

예를 들어 Career Karma 웹사이트의 FAQ(자주 묻는 질문) 페이지를 디자인한다고 가정해 보겠습니다. 사용자가 질문 위에 마우스를 올리면 답변이 담긴 텍스트 블록이 나타나야 합니다. 다음 코드로 이를 구현할 수 있습니다.

<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>

<style>
div {
	display: none;
	background-color: orange;
	padding: 10px;
}

span:hover + div {
	display: block;
}
</style>

<span> 태그로 "What is Career Karma?"라는 질문을 만들고, 그 아래 <div> 태그에 질문에 대한 답변을 담았습니다.

CSS에서 <div> 태그에 적용한 스타일은 다음과 같습니다.

display: none — 평소에는 <div> 태그를 화면에 표시하지 않습니다.
background-color: orange — <div> 태그의 배경색을 주황색으로 지정합니다.
padding: 10px — <div> 내용과 테두리 사이에 10px 여백을 만듭니다.

그다음 span:hover + div 셀렉터로 새로운 규칙을 정의했습니다. 이 규칙은 <div>의 display 속성을 block으로 변경해 요소를 화면에 나타나게 합니다. 즉, 사용자가 <span> 태그(span:hover) 위에 마우스를 올리면 바로 다음에 위치한 형제 요소인 <div> 태그가 보이게 됩니다.

예제 3: 마우스 오버 시 이미지 변경하기

:hover 셀렉터는 웹 페이지의 이미지를 변경하는 데에도 사용할 수 있습니다. 사용자가 이미지 위에 커서를 올리면 새로운 이미지로 교체되는 방식입니다.

예를 들어 동네 카페를 위한 웹사이트를 디자인한다고 가정해 보겠습니다. 소개(About) 페이지의 커피 스톡 이미지 위에 마우스를 올리면 카페 내부 사진으로 교체되길 원합니다.

다음 코드로 이미지 호버 효과를 구현할 수 있습니다.

<img height="750" width="1250" class="aboutImage" />

<style>
.aboutImage {
	background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}

.aboutImage:hover {
	background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
</style>

먼저 높이 750px, 너비 1250px의 이미지를 만드는 <img> 태그를 정의하고, aboutImage라는 클래스를 지정했습니다.

CSS 파일에는 두 가지 규칙이 선언되어 있습니다.

첫 번째 규칙은 .aboutImage 클래스를 가진 요소의 배경 이미지를 커피 스톡 사진으로 설정합니다.

두 번째 규칙인 .aboutImage:hover는 사용자가 해당 요소 위에 마우스를 올렸을 때 배경 이미지를 카페 사진으로 교체합니다.

:hover 셀렉터의 다른 활용법

앞서 살펴본 것처럼 :hover 셀렉터는 다양한 상황에서 유용하게 쓰입니다. 더 깊이 학습하고 싶다면 아래 주제들을 참고해 보세요.

CSS Transition: 사용자가 요소 위에 마우스를 올릴 때 나타나는 전환 효과를 만드는 방법
CSS 내비게이션 바: CSS로 내비게이션 바를 제작하는 방법
CSS 드롭다운 메뉴: CSS로 드롭다운 메뉴를 구현하는 방법

또한 :hover 셀렉터는 버튼 호버 효과를 만드는 데에도 자주 사용됩니다. 버튼의 외관을 바꾸거나 호버 애니메이션을 실행할 수 있습니다. 그 밖의 다른 셀렉터들이 궁금하다면 CSS 셀렉터 관련 가이드를 함께 읽어보는 것을 추천합니다.

마무리

CSS :hover 셀렉터를 사용하면 사용자가 커서를 요소 위에 올렸을 때 해당 요소를 선택하고 새로운 스타일 세트를 적용할 수 있습니다. 적용된 스타일은 사용자가 커서를 요소에서 치울 때까지 화면에 유지됩니다.

이번 글에서는 CSS 셀렉터의 기본 개념과 :hover 셀렉터의 사용법을 다양한 예제와 함께 살펴보았습니다. 이제 여러분도 CSS 전문가처럼 :hover 셀렉터를 활용해 인터랙티브한 웹 페이지를 만들 준비가 되었습니다!