마우스를 움직일 때 나타나는 작은 상자 프롬프트 내용을 자바스크립트로 구현하는 방법

JavaScript는 마우스를 작은 상자로 이동하여 콘텐츠를 표시하는 기능을 포함하여 다양한 기능을 구현하는 데 사용할 수 있는 매우 강력한 프로그래밍 언어입니다. 이 글에서는 JavaScript를 사용하여 이 기능을 구현하는 방법을 자세히 설명합니다.

1. HTML 구조

먼저 HTML 페이지를 만들고 페이지에 프롬프트 콘텐츠가 필요한 몇 가지 요소를 추가해야 합니다. 예를 들어 일부 링크가 포함된 목록을 만들 수 있습니다.

 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
Link 5
 

이 예에서는 "tooltip" 클래스 이름을 사용하여 도구 설명 콘텐츠를 추가해야 하는 요소를 식별합니다.

2. CSS 스타일

다음으로 마우스가 움직일 때 프롬프트 콘텐츠를 표시하려면 이러한 요소에 CSS 스타일을 추가해야 합니다. CSS 의사 클래스 ":after"를 사용하여 프롬프트 상자를 만들고 CSS 속성 "content"를 사용하여 프롬프트 텍스트를 추가할 수 있습니다. 예:

.tooltip { position: relative; } .tooltip:hover:after { content: "This is a tooltip"; position: absolute; top: 100%; left: 0; padding: 5px; background-color: #000; color: #fff; border-radius: 5px; z-index: 999; }

이 예에서는 "위치: 상대" 속성을 사용하여 요소의 상대 위치를 설정하고 "위치: 절대" 속성을 사용하여 도구 설명의 절대 위치를 설정합니다. 또한 "top: 100%" 및 "left: 0" 속성을 사용하여 요소 아래에 도구 설명을 배치했습니다. 또한 "padding", "ground-color", "color" 및 "border-radius"와 같은 몇 가지 다른 CSS 속성을 사용하여 도구 설명의 스타일을 지정합니다.

3. JavaScript 코드

이제 HTML 구조와 CSS 스타일을 만들었으므로 JavaScript를 사용하여 마우스를 움직일 때 작은 상자의 내용을 묻는 기능을 구현해야 합니다.

JavaScript의 addEventListener() 함수를 사용하여 마우스 이동 및 마우스 아웃 이벤트를 수신할 수 있고 JavaScript의 스타일 속성을 사용하여 요소의 스타일을 설정할 수 있습니다. 예:

var tooltips = document.querySelectorAll('.tooltip'); for (var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mouseover', function() { this.style.position = 'relative'; }); tooltips[i].addEventListener('mouseout', function() { this.style.position = ''; }); }

이 예에서는 document.querySelectorAll() 함수를 사용하여 "tooltip" 클래스 이름을 가진 모든 요소를 선택하고 for 루프와 addEventListener() 함수를 사용하여 마우스 이동 및 이동을 수신합니다. -out 이벤트가 각각 발생합니다. 마우스가 안으로 움직일 때 this 키워드를 사용하여 현재 요소의 "position" 속성을 "relative"로 설정하고, 마우스가 밖으로 움직일 때 "position" 속성을 공백으로 설정합니다. 이 과정에서 브라우저는 CSS 스타일에 따라 프롬프트 상자를 표시하거나 숨깁니다.

4. 전체 코드 예제

마지막으로 전체 코드 예제를 살펴보겠습니다.

      
  
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
Link 5
 
   

이 예제에서는 HTML, CSS 및 JavaScript의 세 가지 기술을 사용하여 마우스를 눌렀을 때 나타나는 작은 상자 프롬프트 콘텐츠를 구현합니다. 기능이 이동되었습니다. 특정 요구 사항을 충족하기 위해 필요에 따라 수정하고 조정하십시오.

위 내용은 마우스를 움직일 때 나타나는 작은 상자 프롬프트 내용을 자바스크립트로 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!