实现如图所示效果,鼠标移动到按钮上时按钮背景颜色和字体颜色发生变化,鼠标移出按钮颜色还原。
话不多说,上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 input 8 { 9 width: 100px; 10 height: 40px; 11 margin: 10px 20px 0; 12 background: #fff; 13 border: 1px solid #ffd700; 14 border-radius: 5px; 15 outline: none; 16 color: #ffd700; 17 font-size: 14px; 18 font-weight: 700; 19 } 20 </style> 21 <script> 22 window.onload = function() 23 { 24 var btns = document.getElementsByTagName("input"); 25 for (var i=0;i<btns.length;i++) 26 { 27 btns[i].onmousemove = function() 28 { 29 this.style.backgroundColor = "#ffd700"; 30 this.style.color = "#fff"; 31 } 32 btns[i].onmouseout = function() 33 { 34 this.style.backgroundColor = "#fff"; 35 this.style.color = "#ffd700"; 36 } 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <input type="button" value="按钮"><br /> 43 <input type="button" value="按钮"> 44 </body> 45 </html>