ホームページ > 記事 > ウェブフロントエンド > マウスを動かしたときに表示される小さなボックスのプロンプトコンテンツをJavaScriptで実装する方法

マウスを動かしたときに表示される小さなボックスのプロンプトコンテンツをJavaScriptで実装する方法

WBOYオリジナル: 2023-05-09 11:53:361088ブラウズ

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;
}

この例では、要素の相対位置を設定するために「position:relative」属性を使用し、プロンプトボックスの絶対位置を設定するために「position:absolute」属性を使用します。また、「top: 100%」属性と「left: 0」属性を使用して要素の下にツールチップを配置しました。また、「padding」、「background-color」、「color」、「border-radius」など、他の CSS プロパティを使用してツールヒントのスタイルを設定します。

3. JavaScript コード

HTML 構造と CSS スタイルを作成したので、JavaScript を使用して、小さなボックスのプロンプトコンテンツにマウスを移動する機能を実装する必要があります。

JavaScript の addEventListener() 関数を使用してマウスの移動イベントと移動イベントをリッスンし、JavaScript の style 属性を使用して要素のスタイルを設定できます。例:

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() 関数を使用してマウスの動きを監視します。とそれぞれのイベント。マウスが内側に移動すると、this キーワードを使用して現在の要素の「position」属性を「相対」に設定し、マウスが外側に移動すると、「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 テクノロジーが使用されていますマウスを動かすと小さなボックス内のコンテンツをプロンプト表示する機能を実現します。特定のニーズに合わせて必要に応じて変更および調整してください。

以上がマウスを動かしたときに表示される小さなボックスのプロンプトコンテンツをJavaScriptで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html for 循环事件 this position padding border 伪类 background

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：コンピューターのどこにJavaScriptを設定するか次の記事：コンピューターのどこにJavaScriptを設定するか

続きを見る