JS - 바닐라js로 hover 기능 구현

2025. 3. 16. 23:28

hover는 마우스가 요소 위에 올라갔을 때(mouseenter)와 벗어났을 때(mouseleave)의 동작을 정의하는 기능입니다. 일반적으로 CSS의 :hover 가상 클래스를 사용하지만, JavaScript를 사용하면 더 복잡한 동작을 구현할 수 있습니다.

바닐라js로 hover 기능 구현

바닐라js로 hover 기능 구현

1. hover 기능이란?

2. HTML 구조

3. JavaScript 구현

4. 코드 분석

5. 동작 예시

6. 결론

※ 위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

hover 기능이란?

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background-color: #3498db;
      transition: background-color 0.3s ease; /* 부드러운 전환 효과 */
    }
  </style>
</head>
<body>
  <div id="box"></div>

  <script src="script.js"></script>
</body>
</html>

#box 요소는 초기에 파란색(#3498db) 배경색을 가집니다.
transition 속성을 사용해 배경색이 부드럽게 변경되도록 설정합니다.

JavaScript 구현

// script.js

// 요소 선택
const box = document.getElementById('box');

// mouseenter 이벤트: 마우스가 요소 위에 올라갔을 때
box.addEventListener('mouseenter', () => {
  box.style.backgroundColor = '#e74c3c'; // 배경색을 빨간색으로 변경
  console.log('마우스가 요소 위에 올라갔습니다.');
});

// mouseleave 이벤트: 마우스가 요소를 벗어났을 때
box.addEventListener('mouseleave', () => {
  box.style.backgroundColor = '#3498db'; // 배경색을 파란색으로 변경
  console.log('마우스가 요소를 벗어났습니다.');
});

코드 분석

1) 요소 선택

const box = document.getElementById('box');

getElementById를 사용해 #box 요소를 선택합니다.

2) mouseenter 이벤트

box.addEventListener('mouseenter', () => {
  box.style.backgroundColor = '#e74c3c'; // 배경색을 빨간색으로 변경
  console.log('마우스가 요소 위에 올라갔습니다.');
});

mouseenter 이벤트는 마우스가 요소 위에 올라갔을 때 발생합니다.
이벤트가 발생하면 배경색을 빨간색(#e74c3c)으로 변경하고, 콘솔에 메시지를 출력합니다.

3) mouseleave 이벤트

box.addEventListener('mouseleave', () => {
  box.style.backgroundColor = '#3498db'; // 배경색을 파란색으로 변경
  console.log('마우스가 요소를 벗어났습니다.');
});

mouseleave 이벤트는 마우스가 요소를 벗어났을 때 발생합니다.
이벤트가 발생하면 배경색을 파란색(#3498db)으로 변경하고, 콘솔에 메시지를 출력합니다.

동작 예시

1. 마우스가 요소 위에 올라갔을 때:

#box의 배경색이 빨간색으로 변경됩니다.
콘솔에 "마우스가 요소 위에 올라갔습니다."가 출력됩니다.

2. 마우스가 요소를 벗어났을 때:

#box의 배경색이 파란색으로 변경됩니다.
콘솔에 "마우스가 요소를 벗어났습니다."가 출력됩니다.

결론

이 예제는 바닐라 JavaScript만을 사용하여 hover 기능을 구현하는 방법을 보여줍니다. mouseenter와 mouseleave 이벤트를 활용해 마우스가 요소 위에 올라갔을 때와 벗어났을 때의 동작을 정의할 수 있습니다. 이를 통해 CSS의 :hover 가상 클래스보다 더 복잡한 동작을 구현할 수 있습니다.

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

JS - 바닐라js로 DOM 요소 복사하기 (0)	2025.03.17
JS - 바닐라js로 eq() 선택자 사용 방법 (0)	2025.03.17
JS - 바닐라js로 slideToggle 기능 구현 (0)	2025.03.16
JS - 바닐라js로 FadeIn, FadeOut 기능 구현 (0)	2025.03.16
JS - var 선언과 호이스팅(Hoisting) (0)	2025.03.16

열공의 기록