Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript를 사용하여 마우스가 요소에 들어갈 때 요소 표시

사용자의 마우스가 해당 영역에 들어갈 때 표시하려는 보이지 않는 요소(예:작업 표시줄/메뉴)가 있다고 가정합니다. JavaScript mouseenter 이벤트를 설정하여 이를 수행할 수 있습니다.

JavaScript를 사용하여 마우스가 요소에 들어갈 때 요소 표시

방법:

HTML 마크업

좋아하는 편집기에 다음 HTML 코드를 추가합니다(온라인의 경우 CodePen을 권장합니다.

<div class="invisible-box">Yay you can see me!</div>

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;이 있습니다. 즉, 기본적으로 숨겨져 있습니다. 바로 아래에 유틸리티 클래스 .opacity-1가 있습니다. JavaScript로 요소를 다시 표시하는 데 사용할 것입니다.

자바스크립트 마우스 입력 이벤트

JS 스크립트에 다음 코드를 추가하세요.

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

자바스크립트 코드 작동 방식

  • 먼저 querySelector()를 사용합니다. .invisible-box를 찾아서 잡기 . 그런 다음 적합한 이름을 가진 변수에 할당합니다. invisibleBox .
  • 그런 다음 함수 선언을 설정합니다. 이름을 addFullOpacity()로 지정합니다. . 본문 {..} 내부 문을 추가합니다. .
  • 문은 classList 속성의 add()를 첨부합니다. 메서드를 보이지 않는 상자에 추가하고 opacity-1을 추가합니다. 클래스를 보이지 않는 상자 요소에 추가합니다.
  • 마지막으로 addEventListener()를 설정했습니다. 그리고 두 가지 주장을 하세요. 첫 번째 인수는 mouseenter를 수신합니다. 이벤트. 두 번째 인수는 addFullOpacity() 위에서 만든 함수(mouseenter 이벤트를 등록하는 즉시).

마우스 엔터 대 마우스 오버?

마우스오버라는 이벤트 유형도 있다는 것을 눈치채셨을 것입니다. — mouseenter와 어떻게 다릅니까?

주요 차이점은 다음과 같습니다.

  • 마우스오버 이벤트는 사용자의 마우스가 상위 요소 또는 하위 요소 위로 이동할 때마다 트리거됩니다. 뒤로 이동하고 네 번째 요소를 계속 이동하면 계속 트리거됩니다. 이는 성능 면에서 비용이 많이 들 수 있습니다.
  • mouseenter 이벤트는 만 트리거합니다. 마우스가 대상 부모 요소에 들어갈 때 - 자식은 신경 쓰지 않습니다. :-(

마우스오버를 사용하고 싶을 것입니다. 사용자가 상호 작용할 때 다르게 작동하려는 다양한 기능이 포함된 웹 구성 요소가 있는 경우. 그렇지 않으면 mouseenter를 사용하세요. 성능이 더 좋기 때문입니다.

자료

  • 모든 코드가 포함된 CodePen
  • MDN 웹 문서 마우스 엔터