第一种：用css来做
多的不说，效果和代码如下：
1.效果
| 状态 | 显示效果 |
| 默认状态 |  |
| 鼠标在时 |  |
2.代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 6 7 <style type="text/css"> 8 #wrap .add-app{ 9 display:block; 10 width:100px; 11 height:28px; 12 line-height:28px; 13 text-align:center; 14 background:#962CC7; 15 color:white; 16 border-radius:4px; 17 text-decoration: none; 18 } 19 #wrap .add-app:visited{ 20 color:white; 21 } 22 #wrap .add-app:hover{ 23 background:#00A9F0; 24 color:white; 25 text-decoration: none; 26 } 27 </style> 28 29 30 </head> 31 </head> 32 <body> 33 <div id="wrap"> 34 <a href="#" class="add-app">返回</a> 35 36 </div> 37 </body> 38 </html>
第二种：用css结合事件来做
1.效果
略
2.代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 6 7 <style type="text/css"> 8 .input_load{ 9 border:none; 10 width:84px; 11 height:35px; 12 padding:0 2px 4px 0; 13 *padding-bottom:0; 14 background:#0672AD; 15 font:16px/35px "微软雅黑"; 16 color:#fff; 17 cursor:pointer; 18 border-radius:8px; 19 } 20 .input_on{ 21 border:none; 22 width:84px; 23 height:35px; 24 padding:0 2px 4px 0; 25 *padding-bottom:0; 26 background:red; 27 font:16px/35px "微软雅黑"; 28 color:#fff; 29 cursor:pointer; 30 border-radius:8px; 31 } 32 .input_out{ 33 border:none; 34 width:84px; 35 height:35px; 36 padding:0 2px 4px 0; 37 *padding-bottom:0; 38 background:#0672AD; 39 font:16px/35px "微软雅黑"; 40 color:#fff; 41 cursor:pointer; 42 border-radius:8px; 43 } 44 </style> 45 46 47 </head> 48 </head> 49 <body> 50 <input type="submit" value="保存添加" class="input_load" onmousemove="this.className='input_on'" onmouseout="this.className='input_out'" /> 51 </body> 52 </html>
有何指教，请至信邮箱：1465567571@qq.com