Jquery は、マウスを上に動かすとプロンプトボックスをポップアップし、マウスを動かすと消えるというアイデアとコードを実装します

Jquery は、マウスを上に動かすとプロンプトボックスをポップアップし、マウスを動かすと消えるというアイデアとコードを実装します_jquery

WBOY

リリース： 2016-05-16 17:33:29

オリジナル

1265 人が閲覧しました

アイデア:

1. まず、この効果を実現する要素を見つけます。異なるプロンプトコンテンツを動的に表示する場合は、クラス

を使用します。タイトルを設定する必要があります

3. JQ

を介して配置された要素にマウスオーバーイベントとマウスアウトイベントを追加します。4. 再度改善すると、ポップアップボックスがマウスに追従して移動します。ターゲット要素

5. 次に、マウスオーバーとマウスアウトをホバーにマージします

コードをコピーしますコードは次のとおりです。 🎜>

// ページがロードされます 
$(function () { 
 var x = 10; 
 var y = 20; // オフセット位置を基準にしてプロンプト ボックスを設定しますマウスがブロックされるのを防ぐ 
 $(".prompt").hover(function (e) { //マウスアップイベント 
 this.myTitle = this.title; //タイトルをカスタム属性に割り当てるmyTilte と組み込みプロンプトをブロックします 
 this.title = ""; 
 var toolsHtml = "" this.myTitle "
";プロンプトボックス
 vartooltipHtml = "" / /ページに追加 
 $("#tooltip").css({ "top": (e.pageY y) "px", "left": (e.pageX x) " px" 
 }).show("fast"); //プロンプトボックスの座標を設定し、
 }, function () { //マウスアウトイベント
 this.title = this.myTitle //タイトルをリセット 
 "#toolti").css({ "top": (e.pageY y) "px", 
 "left": (e.pageX x) "px" 
 }) 