标签：
1.最简单的鼠标滑过特效：
利用hover这个属性，css控制。当鼠标滑过激活这个属性，把你想要的样式全部丢在里面，就Ok了！
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>导航</title> 4 <style type="text/css"> 5 table{ 6 text-align:center; 7 } 8 table td{ 9 width:90px; 10 height:40px; 11 text-align:center; 12 border:#F00 1px double; 13 font-size:14px; 14 color:#999; 15 } 16 table td:hover{ 17 background-color:#99C; 18 color:#F00; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="div"> 24 <table align="center"> 25 <tr> 26 <td>MenuFirst</td> 27 <td>MenuSecond</td> 28 <td>MenuThird</td> 29 <td>MenuFourth</td> 30 </tr> 31 </table> 32 </div> 33 </body>
2.利用两个事件。onmouseover()和onmouseout(). js控制，当鼠标移上去的时候背景图替换为想要的效果，移开的时候背景图搞张透明的就行。当然你得先制作这个背景图
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>导航效果</title> 6 <style type="text/css"> 7 #nav{ 8 background-image: url(images/index.png); 9 background-repeat:no-repeat; 10 width:1080px; 11 height:80px; 12 margin:0 auto; 13 padding-left:110px; 14 } 15 #nav div{ 16 float:left; 17 } 18 </style> 19 <script type="text/javascript" language="javascript"> 20 function menuOver(para){ 21 document.getElementById(‘navImg_‘+para).src="images/menu_"+para+".png"; 22 } 23 function menuOut(para){ 24 document.getElementById(‘navImg_‘+para).src="images/menu.png"; 25 } 26 </script> 27 </head> 28 29 <body> 30 <div id="nav"> 31 <a href="#" onmousemove="menuOver(‘1‘)" onmouseout="menuOut(‘1‘)"> 32 <div><img src="images/menu.png" id="navImg_1"/></div> 33 </a> 34 35 <a href="#" onmousemove="menuOver(‘2‘)" onmouseout="menuOut(‘2‘)"> 36 <div><img src="images/menu.png" id="navImg_2"/></div> 37 </a> 38 39 <a href="#" onmousemove="menuOver(‘3‘)" onmouseout="menuOut(‘3‘)"> 40 <div><img src="images/menu.png" id="navImg_3"/></div> 41 </a> 42 43 <a href="#" onmousemove="menuOver(‘4‘)" onmouseout="menuOut(‘4‘)"> 44 <div><img src="images/menu.png" id="navImg_4"/></div> 45 </a> 46 47 <a href="#" onmousemove="menuOver(‘5‘)" onmouseout="menuOut(‘5‘)"> 48 <div><img src="images/menu.png" id="navImg_5"/></div> 49 </a> 50 51 <a href="#" onmousemove="menuOver(‘6‘)" onmouseout="menuOut(‘6‘)"> 52 <div><img src="images/menu.png" id="navImg_6"/></div> 53 </a> 54 55 <a href="#" onmousemove="menuOver(‘7‘)" onmouseout="menuOut(‘7‘)"> 56 <div><img src="images/menu.png" id="navImg_7"/></div> 57 </a> 58 59 <a href="#" onmousemove="menuOver(‘8‘)" onmouseout="menuOut(‘8‘)"> 60 <div><img src="images/menu.png" id="navImg_8"/></div> 61 </a> 62 </div> 63 </body> 64 </html>
标签：
原文地址：http://www.cnblogs.com/Bangxw/p/4518985.html
