这个简单的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的博客，原文链接：【前端开发系列】—— 通过鼠标浮动改变样式，如需转载请自行联系原博主。
时间： 2024-10-01 05:17:23