利用jQuery的hover方法實現鼠標的移入移出效果，代碼如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 6 <style type="text/css"> 7 .wrapper li{ 8 list-style-type: none; 9 width: 100px; 10 height: 20px; 11 border: 1px solid #ccc; 12 text-align: center; 13 } 14 /*需要切換的hover類*/ 15 .hover{ 16 background-color: blue; 17 color: white; 18 font-weight: bold; 19 } 20 </style> 21 22 </head> 23 <body> 24 <ul class="wrapper"> 25 <li>1111111</li> 26 <li>2222222</li> 27 <li>3333333</li> 28 <li>4444444</li> 29 <li>5555555</li> 30 <li>6666666</li> 31 <li>7777777</li> 32 </ul> 33 <script type="text/javascript"> 34 // 鼠標移入移出事件 35 $('li').hover(function() { 36 // 鼠標移入時添加hover類 37 $(this).addClass('hover') 38 }, function() { 39 // 鼠標移出時移出hover類 40 $(this).removeClass('hover') 41 }); 42 </script> 43 </body> 44 </html>
hover()方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。
方法觸發mouseenter和mouseleave事件