input button按钮加鼠标掠过效果的两种方法
input button按钮加鼠标掠过效果的两种方法
1.直接实现方法
实现简单，但写button按钮比较麻烦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.zs{
border:0;
width:73px;
height:23px;
background-image:url(normal.gif);
}
.zs_hover{
border:0;
width:73px;
height:23px;
background-image:url(over.gif)
}
</style>
</head>
<body >
<div >
<input type="button" onmouseover="this.className='zs_hover'"
onmouseout="this.className='zs'" value="确定">
</input>
</div>
</body>
</html>
2.JQuery实现方法
对于通用的所有button按钮加样式，使用此方法写button较为方便。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-
1.4.4.min.js"></script>
<script type="text/javascript"
src="../jquery.easyui.min.js"></script>
<script>
jQuery(function() {
jQuery("input[type='button']").hover(function() {
jQuery(this).addClass("button_css_hover");
}, function() {
jQuery(this).removeClass("button_css_hover");
});
});
</script>
<style>
.button_css{
border:0;
width:73px;
height:23px;
background-image:url(normal.gif);
}
.button_css_hover{
border:0;
width:73px;
height:23px;
background-image:url(over.gif)
}
</style>
</head>
<body>
<div>
<input type ="button" class = "button_css" value = "确定">
</div>
</body>
</html>
