CSS와 JavaScript로 마우스 호버 시 탭 전환하기

CSS와 JavaScript를 함께 활용하면 버튼을 클릭할 필요 없이 마우스 포인터를 올리기만 해도 탭이 전환되는 인터랙티브한 탭 메뉴를 손쉽게 구현할 수 있습니다. 핵심은 각 탭 버튼에 onmouseover 이벤트를 등록하고, 마우스가 올라오는 순간 해당 콘텐츠 영역만 화면에 표시되도록 처리하는 것입니다.

동작 원리

먼저 모든 탭 콘텐츠(.tabcontent)를 숨긴 뒤, 마우스가 올라온 버튼에 대응하는 콘텐츠만 다시 표시(display: block)합니다. 동시에 모든 버튼에서 active 클래스를 제거하고 현재 버튼에만 이 클래스를 추가해 활성 상태를 시각적으로 강조합니다. 덕분에 사용자는 클릭 없이도 자연스럽게 여러 탭의 내용을 빠르게 살펴볼 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: #ccc;
}
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
    display: none;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
</style>
</head>
<body>
<h2>데모용 탭 메뉴</h2>
<p>탭 위에 마우스를 올리면 부서 정보를 확인할 수 있습니다:</p>
<div class="tab">
<button class="tablinks" onmouseover="demo(event, 'Marketing')">마케팅</button>
<button class="tablinks" onmouseover="demo(event, 'Operations')">운영</button>
<button class="tablinks" onmouseover="demo(event, 'Finance')">재무</button>
<button class="tablinks" onmouseover="demo(event, 'IT')">IT</button>
</div>
<div id="Marketing" class="tabcontent">
    <h3>마케팅</h3>
</div>
<div id="Operations" class="tabcontent">
    <h3>운영</h3>
</div>
<div id="Finance" class="tabcontent">
    <h3>재무</h3>
</div>
<div id="IT" class="tabcontent">
    <h3>IT</h3>
</div>
<div class="clearfix"></div>
<script>
function demo(e, dept) {
    var i, content, links;
    content = document.getElementsByClassName("tabcontent");
    for (i = 0; i < content.length; i++) {
        content[i].style.display = "none";
    }
    links = document.getElementsByClassName("tablinks");
    for (i = 0; i < links.length; i++) {
        links[i].className = links[i].className.replace(" active", "");
    }
    document.getElementById(dept).style.display = "block";
    e.currentTarget.className += " active";
}
</script>
</body>
</html>

코드 설명

onmouseover 속성: 각 버튼에 마우스 오버 이벤트를 연결하여, 포인터가 올라오는 즉시 demo() 함수가 호출됩니다.
demo() 함수: 먼저 모든 탭 콘텐츠를 숨기고, 이벤트가 발생한 버튼에 해당하는 콘텐츠만 다시 표시합니다. 이후 active 클래스를 현재 버튼에만 적용해 어떤 탭이 선택되었는지 한눈에 알 수 있게 합니다.
clearfix: float 속성으로 인해 부모 요소의 높이가 무너지는 현상을 방지하는 유틸리티 클래스입니다.
:hover 스타일: 마우스가 올라온 버튼의 배경색을 변경하여 사용자에게 시각적 피드백을 제공합니다.

실행 결과

위 코드를 실행하면 왼쪽에 네 개의 부서 탭(마케팅, 운영, 재무, IT)이 세로로 배치되고, 오른쪽 영역에는 현재 선택된 탭의 내용이 표시됩니다.

CSS와 JavaScript로 마우스 호버 시 탭 전환하기

그중 아무 탭 위에나 마우스를 올려 보세요. 별도의 클릭 없이 해당 부서의 정보로 즉시 전환되는 것을 확인할 수 있습니다.

CSS와 JavaScript로 마우스 호버 시 탭 전환하기