CSS의 :hover 가상 클래스를 사용하면 마우스 커서를 특정 요소 위에 올렸을 때 숨겨져 있던 요소를 화면에 표시할 수 있습니다. 이 기법은 툴팁이나 추가 설명 텍스트를 구현할 때 매우 유용하게 활용되며, JavaScript 없이 CSS만으로 간단히 처리할 수 있다는 장점이 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:20px;
padding:20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.hiddenText {
display: none;
}
.hoverDiv:hover + .hiddenText {
display: block;
color: rgb(71, 0, 65);
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Display an Element on Hover Example</h1>
<div class="hoverDiv" style="font-size: 18px;">Hover over me.</div>
<div class="hiddenText">This text is shown by hovering on the above div</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다. 이 상태에서는 숨겨진 텍스트가 보이지 않습니다.
"Hover over me" 텍스트 위에 마우스 커서를 올리면, 아래와 같이 숨겨져 있던 텍스트가 나타납니다.
코드 핵심 설명
- .hiddenText { display: none; } — 기본 상태에서는 대상 텍스트가 화면에 표시되지 않도록 숨겨둡니다.
- .hoverDiv:hover + .hiddenText — 인접 형제 선택자(
+)와:hover가상 클래스를 조합한 선택자입니다. hoverDiv 요소에 마우스를 올리면, 그 바로 다음에 위치한 hiddenText 요소가display: block으로 전환되어 화면에 나타나게 됩니다.
이처럼 :hover와 형제 선택자를 함께 사용하면 별도의 스크립트 없이도 마우스 오버 반응형 UI를 손쉽게 만들 수 있습니다. 단, 이 방식은 숨길 요소가 호버 대상 요소의 바로 다음 형제로 존재해야 한다는 점을 기억하세요.