我的jquery练习(一)
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jquery练习</title> 6 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <!--（这里的地址是我的本地地址若想实现下面的效果,需在网上或官网上下载jquery-1.4.2.js到电脑上，或者直接到官网复制网络地址）--> 7 <script type="text/javascript"> 8 $(function(){ 9 $('.ys1').css({opacity:0}); 10 var $nav=$('.nav'); 11 $nav.hover(function(){$(this).find('.ys1').fadeTo(200,1)},function(){$(this).find('.ys1').fadeTo(200,0)}) 12 13 }) 14 </script> 15 <style type="text/css"> 16 *{padding:0px;margin:0px;} 17 ul,li{list-style-type:none;} 18 body{font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#000} 19 div{margin:50px auto;width:120px;} 20 .menu{background:#F3F3F3;width:120px;float:left;} 21 .nav{float:left;width:100%;height:25px;line-height:25px;text-align:center;position:relative;} 22 .ys1{width:100%;height:25px;display:block;float:left;line-height:25px;text-align:center;text-decoration:none;color:#FFF;background:#06F;position:absolute;left:0px;top:0px;} 23 </style> 24 </head> 25 <body> 26 <div> 27 <ul class="menu"> 28 <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li> 29 <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li> 30 <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li> 31 <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li> 32 <li class="nav">测试页面<a href="#" class="ys1">测试页面</a></li> 33 </ul></div> 34 </body> 35 </html>
此方法适用新手使用。。高手直接无视！！！！！！！！！！！！！！！
