[HTML/CSS/JS] mouseenter와 mouseleave : 마우스 이벤트를 사용해 보자

 

 

이번 포스팅에서는 많은 마우스 이벤트의 초석이 되는 mouseenter와 mouseleave에 대해 알아보자. 해당 메서드는 지정된 요소에 마우스를 올리고 빼는 과정에서 일어나는 이벤트를 생성해준다. 이와 유사한 메서드로 mouseover와 mouseout이 있으며, 후자의 메서드들은 이벤트 버블링이 일어난다는 차이점을 가진다.

 

 

사용 예시를 보자

마우스 이벤트 적용

 

서로 다른 색의 영역에 마우스를 올리면 검은색으로 변화하며, 마우스가 떠나면 다시 원래의 색으로 돌아간다. 메서드를 알아보기 위해 HTML과 CSS를 준비해 보자.

 

 

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<div class="grid-box">
  <div class="grid-page grid-1"></div>
  <div class="grid-page grid-2"></div>
  <div class="grid-page grid-3"></div>
  <div class="grid-page grid-4"></div>
</div>

 

CSS

.grid-box {
  width: 600px;
  height: 600px;
  border: 10px solid black;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-1 {
  background-color: red;
}

.grid-2 {
  background-color: blue;
}

.grid-3 {
  background-color: yellow;
}

.grid-4 {
  background-color: green;
}

/* active 클래스가 추가될 시 적용 */
.grid-page.active {
  background-color: black;
}

 

HTML에서 grid-page 클래스를 가진 엘리먼트가 active 클래스를 가지면 검은색으로 변경되도록 CSS를 작성해 주었다.

이러한 준비를 통해 JavaScript를 통하여 grid-page 클래스를 가진 요소에 active 클래스를 추가해 주기만 하면 배경색이 검은색으로 변경하는 이벤트를 줄 수 있다.

클래스를 추가하고 제거하는 역할은 아래의 포스팅에서 다루었으니, 해당 포스팅을 참고하고 오는 것을 추천한다.

 

 

[HTML/CSS/JS] JQuery의 addClass와 removeClass : 엘리먼트에 클래스를 추가, 삭제해 보자

[HTML/CSS/JS] JQuery의 addClass와 removeClass : 엘리먼트에 클래스를 추가, 삭제 해보자

---

 

JQuery를 이용하여 mouseenter와 mouseleave 메서드를 적용해 보겠다. 

 

mouseenter : grid-page 클래스를 가진 요소에 마우스를 올리면, addClass 메서드에 의해 active 클래스를 추가

mouseleave : grid-page 클래스를 가진 요소에서 마우스가 떠나면, removeClass 메서드에 의해 active 클래스를 제거

 

 

JS

// 요소에 마우스를 올리면
$('.grid-page').mouseenter(function() {
  $(this).addClass('active');
});


// 요소에서 마우스가 떠나면
$('.grid-page').mouseleave(function() {
  $(this).removeClass('active');
});

 

mouseover와 mouseout과 다르게 버블링이 일어나지 않아 해당 요소만 잘 고려하여 적재적소에 활용한다면, 다양한 이벤트에서 활용하기 좋아 보인다. 다음 포스팅에서는 또 다른 메서드를 알아보기로 하고, 이번 포스팅은 여기서 마친다.

 

 

---

◆ 함께 보면 좋은 글

• [HTML/CSS] 1차 메뉴 바 만들기 : 마우스를 인식해 보자
• [HTML/CSS] 드롭다운 메뉴 바 만들기 : 2차 메뉴 만들기 feat. position
• [HTML/CSS] 사이드바 메뉴 만들기 : 늘어나는 2차 메뉴 만들기 feat. overflow: hidden
• [HTML/CSS] transform-origin & rotate를 사용하자 : 변신하는 아이콘 만들기 feat. position