【前端開發系列】—— 經過鼠標浮動改變樣式

時間 2019-11-19

原文原文鏈接

這個簡單的demo，能夠應用到不少地方。好比導航鼠標移動到上方時，能夠改變樣式，或者觸發下拉框，等等。頗有意思javascript

 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>