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

アイデア:

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"
})

声明：

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