コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Jquery は、マウスを上に動かすとプロンプト ボックスをポップアップし、マウスを動かすと消えるというアイデアとコードを実装します_jquery

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

WBOY
リリース： 2016-05-16 17:33:29
オリジナル
1300 人が閲覧しました
アイデア:

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

関連ラベル：
ポップアップ プロンプトボックス ねずみ
ソース：php.cn
前の記事：jqueryカスタム属性(型/属性値)_jquery 次の記事：js オブジェクト array_javascript の OrderByAsc メソッドと OrderByDesc メソッドを拡張するための実装アイデア
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
SQL Count() にも 0 が必要です テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
から 2024-04-06 19:48:53
0
1
449
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート