"인터랙티브 전체 화면 호버 탭 갤러리 (순수 CSS + JS)
🚀 소개
이 프로젝트에서는 순수 CSS와 JavaScript를 사용하여 전체 화면 호버 탭 갤러리 효과를 만들었습니다.
🎯 기능
부드러운 배경 전환
호버 기반 탭 전환
완전 반응형 레이아웃
외부 라이브러리 불필요
🛠️ 작동 방식
각 열에는 data-tab 속성이 있습니다.
호버 시 JavaScript가 해당 배경 이미지를 활성화합니다.
💻 JavaScript 로직
🔗 라이브 데모
js
const tabs = document.querySelectorAll(".cluom-box");
tabs.forEach((tab) => {
tab.addEventListener("mouseover", function () {
tabs.forEach((e) => e.classList.remove("current"));
this.classList.add("current");
const tabId = this.getAttribute("data-tab");
document
.querySelectorAll(".bg-img")
.forEach((img) => img.classList.remove("current"));
document.getElementById(tabId).classList.add("current");
});
});"
dev.to
Interactive Hover Showcase
