button的鼠标移入移出特效

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

button的鼠标移入移出特效_第1张图片

话不多说,上代码

 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>

 

转载于:https://www.cnblogs.com/amberriver2759/p/8582138.html

你可能感兴趣的:(button的鼠标移入移出特效)