1。アプリケーションシナリオ
Divはマウスのホバーをポップアップし、このDivに関数ポータルもあるため、マウスの葉の直後に隠すことはできません。例えば：
マウスが友人リストの友人のアバターを通過したときにプロフィールカードを表示する効果は次のとおりです。
ホバー時にQRコードを表示します
2。実現
このような単純な効果を使用してください：マウスホバーはAにBを表示してシミュレートします
実装するには2つの方法があります。 2番目のものをお勧めします。最初のものには欠点があります。以下でお話します。
1。方法1
原則：トリガー要素Aと表示された要素Bを同じ親要素に配置すると、マウスが親要素を通過すると表示Bがトリガーされます。このようにして、マウスがBに移動すると、Divは隠されません。
コード：
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title>ショーb </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </> <スタイル= "lopt/cs"> cs "> cs"> cs "> cs"マージン：10px 0 10px 10px;幅：50px;高さ：50px;バックグラウンドカラー：#ccc; }＃msg-box {border：1px solid black;幅：200px;高さ：150px;表示：なし;フロート：左;パディング：10px} </style> </head> <body> <div id = "hoverwrap"> <div id = "hook"> a </div> <div id = "msg-box"> functionモジュールb </div> </div> <スクリプト= "text/javascript"> $（ "＃hoverwrap"）。 $（ "＃msg-box"）この方法は実装が比較的簡単ですが、親タグのレイヤーを包む必要があり、不利な点があります。2つの要素を間隔で留めることはできません。
2。方法2
原則：マウスがAを通過すると、Bがポップアップし、A OUTを移動し、タイマーを0.5秒遅らせてからBを閉じます。そのため、Aに移動するときに判断する必要があります。タイマーがある場合は、最初にタイマーをクリアしてからBを表示します。
ユーザーがイベントをトリガーするAを離れると、閉じる前にデータカードDIVを0.5秒遅らせる必要があります。ユーザーは、対応する操作を実行するのに十分な時間があります。マウスがデータカードbに移動すると、以前はBのタイミングが取られていたBのタイマーがBに移動しました。
完全なコードは次のとおりです。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title>ショーb </title> <script src = "http://code.jquery.com/jquery-1.12.2.min.js"> </> <スタイル= "lopt/cs"> cs "> cs"> cs "> cs"マージン：10px;幅：50px;高さ：50px;バックグラウンドカラー：#ccc; }＃msg-box {border：1px solid black;幅：200px;高さ：150px;表示：なし;フロート：左;パディング：10px} </style> </head> <body> <div id = "hook"> a </div> <div id = "msg-box"> function module b </div> <script type = "text/javascript"> varタイマー; $（ "＃hook、＃msg-box"）。bind（ "mouseover"、showmsgbox）; $（ "＃fook"）。 }）; function showmsgbox（）{if（timer）{cleartimeout（timer）;} $（ "＃msg-box"）。function hidemsgbox（）{function（）{$（ "＃msg-box"）。非表示（）;JSパート：
<script type = "text/javascript"> var timer; $（ "＃hook、＃msg-box"）。bind（ "mousever"、showmsgbox）; $（ "＃hook"）。 $（ "＃msg-box"）。hide（）; function showmsgbox（）{cleartimeout（timer）;} $（ "＃msg-box"）注意すべきこと
1. Mousemoveの代わりにマウスオーバーを使用して、イベントをトリガーします。
マウスオーバー：マウスがターゲット要素を移動するとトリガーされます。
Mousemove：マウスは、要素内を移動するときにトリガーを続けます。
したがって、マウスオーバーとマウスモーブはリソースを消費します。
詳細については、http：//www.cnblogs.com/starof/p/4106904.htmlを参照してください
2。タイマーを呼び出す前に宣言します
宣言されていない場合、マウスが最初に移動するときはタイマーが宣言されないため、マウスが初めて移動するとエラーが報告されます。
3.マウスオーバーイベントを呼び出す前にタイマーをクリアする必要があります
クリアされていない場合、Bは0.5秒後に自動的に閉じられます。
3。ユニバーサル関数にパッケージ化します
この関数がより一般的であることを考慮すると、パッケージ化されています。 JSはいくつかの互換性の問題に対処する必要があるため、JQueryで書かれています。
/*** @description Mouse Hover to ohookにOmsgboxを表示します。 * @author liuxiaoyan* @date 2016-03-24 15：01：13* @last変更：liuxiaoyan* @last modified time：2016-03-24 15:01:13* // hovershowmsg.init（{hook：$（ "。viedphone"）、msgbox：$（ "。viewphonescan"）}）; ohook.bind（{mousever：showmsgbox：hidemsgbox}）; omsgbox.hide（）;上記は、QQの友人Avatar Hoverに基づいたJSに基づいて、情報カードを表示する効果（推奨）を実現する方法の完全な内容です。私はそれが誰にでも役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者はあなたに時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！