button的鼠标移入移出特效

实现如图所示效果，鼠标移动到按钮上时按钮背景颜色和字体颜色发生变化，鼠标移出按钮颜色还原。

话不多说，上代码

 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>

 

posted @ 2018-03-16 15:21  amberriver  阅读(948)  评论(0)  编辑  收藏  举报