jQuery实现鼠标的移入移出效果

利用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事件

jQuery实现鼠标的移入移出效果

推荐阅读