사용자의 마우스가 특정 영역에 들어왔을 때 보이지 않던 요소(예: 액션 바나 메뉴)를 화면에 표시하고 싶은 경우가 있습니다. 이럴 때 JavaScript의 mouseenter 이벤트를 활용하면 간단하게 구현할 수 있습니다.
구현 방법
1. HTML 마크업
아래 HTML 코드를 선호하는 에디터에 추가하세요. 온라인 에디터를 찾고 있다면 CodePen을 추천합니다.
<div class="invisible-box">Yay you can see me!</div>2. CSS 스타일링
스타일시트에 다음 CSS 코드를 추가합니다.
.invisible-box {
opacity: 0;
transition: all 500ms;
padding: 32px;
margin-top: 32px;
margin-bottom: 32px;
background-color: #cf4b32;
color: #fff;
text-align: center;
}
.opacity-1 {
opacity: 1;
}.invisible-box 클래스에는 opacity: 0;이 적용되어 있어 요소가 기본적으로 숨겨져 있습니다. 그 아래에는 JavaScript로 요소를 다시 보이게 할 때 사용할 유틸리티 클래스 .opacity-1이 정의되어 있습니다.
3. JavaScript mouseenter 이벤트
JS 스크립트에 다음 코드를 추가하세요.
let invisibleBox = document.querySelector(".invisible-box")
function addFullOpacity() {
invisibleBox.classList.add("opacity-1")
}
invisibleBox.addEventListener("mouseenter", addFullOpacity)JavaScript 코드 작동 원리
- 먼저
querySelector()를 사용해.invisible-box요소를 찾아 알기 쉬운 이름의 변수invisibleBox에 할당합니다. - 그다음 함수 선언(function declaration)으로
addFullOpacity()함수를 만들고, 함수 본문{..}안에 실행할 문(statement)을 작성합니다. - 이 문장은
classList속성의add()메서드를 통해 해당 요소에opacity-1클래스를 추가합니다. - 마지막으로
addEventListener()를 설정하고 두 개의 인수를 전달합니다. 첫 번째 인수는mouseenter이벤트를 감지하며, 두 번째 인수는 이벤트가 발생하는 즉시 앞서 만든addFullOpacity()함수를 호출합니다.
mouseenter vs mouseover, 무엇이 다를까?
mouseover라는 이벤트 타입도 있다는 점을 눈치챘을 수 있습니다. mouseenter와는 어떻게 다를까요?
핵심적인 차이는 다음과 같습니다.
- mouseover 이벤트는 부모 요소뿐 아니라 그 자식 요소 위로 마우스가 이동할 때마다 매번 발생합니다. 요소 사이를 계속 왕복하면 이벤트가 반복적으로 트리거되므로 성능 측면에서 비용이 클 수 있습니다.
- mouseenter 이벤트는 오직 대상 부모 요소에 마우스가 진입할 때 한 번만 발생하며, 자식 요소는 고려하지 않습니다.
따라서 자식 요소마다 서로 다른 동작이 필요한 웹 컴포넌트를 만들 때는 mouseover가 적합합니다. 그 외의 경우에는 성능 면에서 유리한 mouseenter를 사용하는 것이 좋습니다.
참고 자료
- 전체 코드가 담긴 CodePen 예제
- MDN Web Docs - mouseenter 문서