<자바스크립트 Javascript> mouseover, mouseout 이벤트

- 자바스크립트 mouseover, mouseout 이벤트

자바스크립트에서 마우스와 관련된 이벤트들을 활용하여 재미있는 효과를 만들었다. 사용한 이벤트는 mouseover와 mouseout인데, 선택한 영역에 마우스가 진입하는 이벤트가 나타나면 효과가 나타나고, 마우스가 영역 밖으로 벗어나는 이벤트가 나타나면 효과가 사라진다. 다음은 개인 프로젝트의 예시 사진이다.

mouseout 이벤트 발생 시

mouseover 이벤트 발생 시

프로그래밍을 위한 추천 도서를 소개하는 페이지에 나열된 목록 중 하나다. 도서의 사진 위로 마우스가 이동하면, mouseover 이벤트가 발생하면서 이미지는 흐려지고 '더 알아보기' 문구가 나타난다. 클릭하면 도서 소개 페이지로 이동도 한다! 그리고 마우스가 다시 사진 영역을 벗어나면, mouseout 이벤트가 발생한 것으로 인식하고 원본 도서 사진으로 돌아온다. 코드는 다음과 같다.

 

 

1) HTML 코드

<li>
  <button class="button">
    <div class="more hidden">
      <a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=268444562" target="_blank"><h5>더 알아보기</h5></a>
    </div>
    <article class="contents">
      <img src="../images/한권으로읽는컴퓨터.jpg" alt="책사진" width="250" height="290">
      <br><h6>한 권으로 읽는 컴퓨터 구조와 프로그래밍</h6>
    </article>
  </button>
</li>

div 태그의 클래스명 "more hidden" 부분이 mouseover 이벤트 발생 시에 나타나는 부분이다. 클래스명이 more과 hidden 이렇게 두 개인데, 이는 자바스크립트를 이용해 이벤트 발생 시 컨트롤하기 위해서 설정하였다. 그리고 article 태그 영역이 본문(원본 도서 사진)의 부분이다. 

 

 

2) CSS 코드

.button {width: 300px; height: 400px; background-color: white; border-radius: 20px; border: 1px Bisque solid; font-size: 10px; box-sizing: border-box; margin: 0 10px; vertical-align: top; position: relative;}
.more {width: 200px; height: 200px; left: 50px; text-align: center; vertical-align: middle; position: absolute; z-index: 2; font-size: 10px;}
.more > a {font-weight: bold;}
.opacity{opacity: 0.2;}
.hidden {display: none;}
h6 {position: absolute; z-index: 1; bottom: 40px; right: 10px; left: 10px;}
img {position: absolute; z-index: 1; top: 35px; left: 25px;}

버튼 태그는 도서 사진이 위치하고 있는 둥근 쉐잎의 직사각형 영역에 대한 코드이다. 바탕화면은 기본 하얀색으로 설정하였다. more은 mouseover 이벤트 발생 시 나타나는데, 이벤트 발생 전에는 뒤에 숨어있도록 z-index의 값을 2로 설정하였다. 마찬가지로 '더 알아보기' 글씨와 함께 나타나는 흐릿한 배경화면은 기본으로 설정해두었던 하얀색 배경화면에 투명도를 준 것인데, css 코드에만 적어두고 자바스크립트를 통해 이벤트 발생 시 opacity라는 이름으로 클래스가 추가되도록 설정해두었다. 마지막으로 HTML 코드에서 보았던 'hidden' 클래스에는 display를 none으로 설정하여 평소에는 해당 코드로 표현한 부분은 나타나지 않도록 설정해두었다.

 

이 외의 원본 도서 사진과 도서 제목은 z-index의 값을 1로 설정하여 제일 앞에 나와있도록 설정해두었다.

 

 

3) Javascript 코드

const more = document.querySelectorAll(".more");
const contents = document.querySelectorAll(".contents");
const button = document.querySelectorAll(".button");

for(let i=0;i<button.length;i++){
	button[i].addEventListener("mouseover", function(){
			more[i].classList.remove("hidden");
			contents[i].classList.add("opacity");
	})
}

for(let i=0;i<button.length;i++){
	button[i].addEventListener("mouseout", function(){
		more[i].classList.add("hidden");
		contents[i].classList.remove("opacity");
	})
}

자바스크립트에서는 우선 more과 contents, button 태그들을 모두 가져온다. 실제 코드에서는 위의 도서 리스트가 다수로 나열되기 때문이다. 그리고 이들을 for 반복문을 이용해 하나씩 꺼내오면서, mouseover와 mouseout 이벤트를 설정해준다. 

 

mouseover 이벤트 발생 시에는, '더 알아보기' 폰트 및 배경 투명도를 나타낼 수 있게 more 클래스에서 'hidden'을 제거하고 내용 영역인 contents 태그에 opacity 태그를 추가해준다. 그러면 css에서 설정되어 있던 hidden 설정 효과도 함께 사라지면서 '더 알아보기' 폰트 및 투명해진 배경이 나타난다. 

 

mouseout 이벤트 발생 시에는, 이와 반대로 설정해준다. more 클래스에서 hidden을 다시 추가하고, contents 태그에 opacity 태그를 제거해준다. 그러면 '더 알아보기' 및 투명 배경 효과는 원본 도서 이미지로 덮이게 된다.