ホームページ >ウェブフロントエンド >フロントエンドQ&A >マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法
方法: 1. hover() メソッドを使用してマウス イベントを親要素にバインドし、「親要素.hover (関数の受け渡し、関数の終了)」という構文で 2 つのイベント処理関数を指定します。 . After 関数内で、「child element.show()」を使用して子要素を表示します; 3. Leave 関数内で、「child element.hide()」を使用して子要素を非表示にします。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
#jquery は非表示効果を残したマウス通過表示を実現します
実装方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <style> div{ border: 1px solid red; height: 100px; } p{ background-color: pink; display: none; } </style> <script> $(function() { $("div").hover(function() { $("p").show(); }, function() { $("p").hide(); }); }) </script> </head> <body> <div> <p> p元素,默认是隐藏的,当鼠标经过时显示,离开时隐藏 </p> </div> <br> <span>使用鼠标悬停div元素</span> </body> </html>
説明:
hover() メソッドは、マウス ポインターが選択された要素上にあるときに実行される 2 つの関数を指定します。 メソッドは、mouseenterイベントとmouseleaveイベントをトリガーします。 注: 関数が 1 つだけ指定されている場合は、mouseenter と Mouseleave の両方がその関数を実行します。 構文:$(selector).hover(inFunction,outFunction)
説明 | |
---|---|
inFunction | 必須。 MouseEnterイベントが発生したときに実行する関数を指定します。|
オプション。 Mouseleave イベントが発生したときに実行する関数を指定します。 |
以上がマウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。