웹 페이지에서 페이지네이션(페이지 번호)에 마우스를 올렸을 때 시각적인 반응을 보여주면 사용자 경험이 크게 향상됩니다. CSS의 :hover 선택자를 활용하면 별도의 JavaScript 없이도 간단하게 호버 효과를 추가할 수 있습니다.
호버 가능한 페이지네이션 구현 방법
페이지네이션 링크에 :hover 선택자를 적용하면, 사용자가 마우스를 링크 위에 올릴 때 배경색이나 글자색이 변경되어 현재 어떤 페이지를 가리키고 있는지 직관적으로 알 수 있습니다.
아래 예제 코드는 :hover 선택자와 함께 :not(.active) 가상 클래스를 조합하여, 현재 활성화된 페이지가 아닌 항목에만 호버 효과가 나타나도록 구현한 것입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
}
.demo a.active {
background-color: orange;
color: white;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html"><</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html" class="active">Quiz4</a>
<a href = "next.html">></a>
</div>
</body>
</html>코드 설명
- .demo — 페이지네이션 전체를 감싸는 컨테이너로,
inline-block으로 설정하여 콘텐츠 흐름 안에 자연스럽게 배치됩니다. - .demo a — 각 페이지 링크에 빨간색 글자와 여백(padding)을 지정하고, 기본 밑줄을 제거합니다.
- .demo a.active — 현재 보고 있는 페이지를 주황색 배경과 흰색 글자로 강조합니다.
- .demo a:hover:not(.active) — 활성 페이지를 제외한 나머지 링크에 마우스를 올리면 노란색 배경이 표시되어 호버 상태임을 알려줍니다.
위 코드를 실행하면 Quiz4가 현재 페이지로 강조되고, 다른 페이지 번호에 마우스를 올릴 때마다 배경색이 노란색으로 바뀌는 것을 확인할 수 있습니다. 이처럼 :hover 선택자만으로도 사용자 친화적인 페이지네이션 UI를 손쉽게 완성할 수 있습니다.