简单的鼠标经过特效-mouse事件

 1 <!doctype html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     body,ul,li{margin:0; padding:0; list-style:none}
 8     ul li{width:100px; height:100px; border:1px solid #f00; float:left; margin:50px 10px; background-color:#ffffff;}
 9     ul li.current{border:1px solid #dfdfdf; background-color:#ff0000;}
10 </style>
11 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
12 
13 </head>
14 <body>
15     <h1>鼠标经过下面的块</h1>
16     <ul>
17         <li></li>
18         <li></li>
19         <li></li>
20         <li></li>
21     </ul>
22 </body>
23 </html>
24 <script type="text/javascript">
25     $("ul li").mouseover(function()
26     {
27          $(this).addClass("current");
28     }).mouseout(function()    
29     {
30         $(this).removeClass("current");        
31     });
32 </script>

低版本浏览器不支持hover伪类，这段代码可以解决这个问题。实现完美兼容。