ホームページ > 記事 > ウェブフロントエンド > jQueryのマウスホバーevent.hover()の使い方を詳しく解説
は、Domのmouseenter(マウスの入力)イベントとmouseleave(マウスの離脱)イベントを簡素化するために、JQueryの.hover()イベントを提供します。hover(匿名メソッド)の最初のパラメータはmouseenterを表し、2番目のパラメータはmouseleaveを示します。これは、ホバーに対して 2 つのパラメーターを渡すことができることを意味します。次のコードに示すように:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hover demo</title> <style> ul { margin-left: 20px; color: blue; } li { cursor: default; } span { color: red; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <ul> <li>Milk</li> <li>Bread</li> <li class="fade">Chips</li> <li class="fade">Socks</li> </ul> <script> $( "li" ).hover(//为li绑定了鼠标进入和鼠标移开的两个参数 function() { $( this ).append( $( "<span> ***</span>" ) ); }, function() { $( this ).find( "span:last" ).remove(); } ); $( "li.fade" ).hover(function() {<pre name="code" class="html" style="color: rgb(51, 51, 51); font-size: 14px; line-height: 26px;">//为li元素下的class类是fade的所有元素绑定了鼠标进入参数 $( this ).fadeOut( 100 ); $( this ).fadeIn( 500 );}); </script> </body> </html>
以上がjQueryのマウスホバーevent.hover()の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。