这个简单的demo，可以应用到很多地方。比如导航鼠标移动到上方时，可以改变样式，或者触发下拉框，等等。很有意思
1 <html> 2 <head> 3 <style type="text/css"> 4 .red { 5 color:red; 6 font-size: 32; 7 font-style: italic; 8 } 9 .blue { 10 color: blue; 11 font-size: 25; 12 } 13 .black { 14 color: black; 15 font-size: 16; 16 } 17 </style> 18 19 <script type="text/javascript"> 20 function color(e){ 21 switch(e.srcElement.id){ 22 case "first": 23 document.getElementById("first").className = "red"; 24 break; 25 case "second": 26 document.getElementById("second").className = "blue"; 27 break; 28 } 29 } 30 function clearText(e){ 31 switch(e.srcElement.id){ 32 case "first": 33 document.getElementById("first").className = "black"; 34 break; 35 case "second": 36 document.getElementById("second").className = "black"; 37 break; 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);"> hello1 </div> 44 <div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);"> hello2 </div> 45 </body> 46 </html>
样例展示
本文转自博客园xingoo的博客，原文链接：【前端开发系列】—— 通过鼠标浮动改变样式，如需转载请自行联系原博主。
