마우스를 움직일 때 나타나는 작은 상자 프롬프트 내용을 자바스크립트로 구현하는 방법-프런트엔드 Q&A-php.cn

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

WBOY

풀어 주다： 2023-05-09 11:53:36

원래의

1145명이 탐색했습니다.

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

1. HTML 구조

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

<ul>
  <li><a href="#" class="tooltip">Link 1</a></li>
  <li><a href="#" class="tooltip">Link 2</a></li>
  <li><a href="#" class="tooltip">Link 3</a></li>
  <li><a href="#" class="tooltip">Link 4</a></li>
  <li><a href="#" class="tooltip">Link 5</a></li>
</ul>

로그인 후 복사

이 예에서는 "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. 전체 코드 예제

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Tooltip</title>
  <style>
    .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;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" class="tooltip">Link 1</a></li>
    <li><a href="#" class="tooltip">Link 2</a></li>
    <li><a href="#" class="tooltip">Link 3</a></li>
    <li><a href="#" class="tooltip">Link 4</a></li>
    <li><a href="#" class="tooltip">Link 5</a></li>
  </ul>

  <script>
    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 = '';
      });
    }
  </script>
</body>
</html>

로그인 후 복사

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

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