首页 > 代码库 > 通过修改this.className 背景改变的按钮
通过修改this.className 背景改变的按钮
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>背景改变的按钮</title>
<script src="http://www.mamicode.com/js/try.js"></script>
<style>
body{
font-size:12px;
}
.free{
width:286px;
border:1px solid #c1c1c1;
border-top:none;
background-color:#f9f9f9;
}
.overStyle{
color:#489379;
width:102px;
height: 24px;
text-align:center;
border:0;
font-weight:bold;
cursor:pointer;
margin:0 0 0 96px;
background:#2868B8;
}
.outStyle{
color:#489379;
width:102px;
height: 24px;
text-align:center;
border:0;
font-weight:bold;
cursor:pointer; /* 手状 */
margin:0 0 0 96px;
background-color:#f9f9f9;
}
</style>
</head>
<body>
<table align="center" class="free">
<tr><td colspan="2" height="80"></td></tr>
<tr>
<td>
<select name="type">
<option>会员名</option>
<option selected="selected">邮箱名</option>
</select>
</td>
<td><input type="text" name="email" size="15">@sina.com</td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="pass" size="15"></td> <!-- 设置input长度 15个字段 -->
</tr>
<tr>
<td> </td>
<td><input type="checkbox" name="remem">记住邮箱名</td>
</tr>
<tr>
<td clospan="2">
<input type="submit" value="http://www.mamicode.com/登录" class="outStyle"
onm ouseover="this.className=‘overStyle‘"
onm ouseout="this.className=‘outStyle‘">
</td>
</tr>
</table>
</body>
</html>
通过修改this.className 背景改变的按钮