ホームページ >ウェブフロントエンド >フロントエンドQ&A >マウスを動かしたときに表示される小さなボックスのプロンプトコンテンツをJavaScriptで実装する方法
マウスを動かしたときに表示される小さなボックスのプロンプトコンテンツをJavaScriptで実装する方法
- WBOYオリジナル
- 2023-05-09 11:53:361176ブラウズ
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 サイトの他の関連記事を参照してください。