预览效果：
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>hover延迟效果</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0; list-style:none;font-size:12px;} 8 .mytab { background:#FF9900; width: 600px; margin-top: 100px; margin-right: auto; margin-left: auto; height: 230px; } 9 .mytab .title li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #099; border: 1px solid #FFF; margin-left: 14px; margin-top: 14px; } 10 .mytab .content li { line-height: 200px; text-align: center; height: 200px; width: 600px; clear: both; } 11 .mytab .title li.cur { color:#000; background: #FFF; font-weight: bold; border: 1px solid #000; } 12 a { color:#FFF} 13 .mytab .title li.cur a{ color:#000;} 14 </style> 15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 16 <script> 17 $(function(){ 18 var t_li = $(".mytab .title li") 19 var c_li = $(".mytab .content li") 20 t_li.hover(function(){ 21 var i = t_li.index($(this)); 22 function way(){ 23 t_li.removeClass("cur").eq(i).addClass("cur"); 24 c_li.hide().eq(i).show(); 25 } 26 timer=setTimeout(way,500); 27 },function(){ 28 clearTimeout(timer); 29 }); 30 }); 31 </script> 32 </head> 33 <body> 34 <div class="mytab"> 35 <ul class="title"> 36 <li class="cur"><a href="#">标题1</a></li> 37 <li><a href="#">标题2</a></li> 38 <li><a href="#">标题3</a></li> 39 <li><a href="#">标题4</a></li> 40 <li><a href="#">标题5</a></li> 41 </ul> 42 <ul class="content"> 43 <li>内容1</li> 44 <li style="display:none;">内容内容2</li> 45 <li style="display:none;">内容内容内容3</li> 46 <li style="display:none;">内容内容内容内容4</li> 47 <li style="display:none;">内容内容内容内容内容5</li> 48 </ul> 49 </div> 50 </body> 51 </html>
