【前端开发系列】—— 通过鼠标浮动改变样式

最新推荐文章于 2024-06-18 16:11:06 发布

xing halo

最新推荐文章于 2024-06-18 16:11:06 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/xingoo_/article/details/86142579

版权

【前端开发系列】—— 通过鼠标浮动改变样式

这个简单的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>