jsp/html按钮效果

我做的是个搜索按钮，包含鼠标移动到标签上，和移出效果，下面代码是控制特定的标签。代码如下

<span  οnclick="doSearch()" style="padding:4px 16px;margin-left:30px;background-color:#F0F0F0;border-radius:11px;font-size:15px;cursor: pointer;" id="doSearch" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()">search</span>


<script type="text/javascript">
	function mouseOver(){
		$("#doSearch").css({"border":"none","background-color":"#D9D9D9","color":"red"});
	}
	function mouseOut(){
		$("#doSearch").css({"border":"none","background-color":"#F0F0F0","color":"black"});
	}
</script>

如果一个页面包含多个这样的button，那么上面的方法就不可行了，必须用Jquery统一控制Class属性;代码如下:

//这是样式控制

<style type="text/css">
.overButtonStyle {
padding:4px 16px;
	margin-left:30px;
	border-radius:11px;
	font-size:13px;
	cursor: pointer;
	background-color:#D9D9D9;
	color:red
}
.buttonStyle {
	padding:4px 16px;
	margin-left:30px;
	background-color:#F0F0F0;
	border-radius:11px;
	font-size:13px;
	cursor: pointer;
	color:black
}

//页面加载之后就读取以下内容到内存中

<script type="text/javascript">
$('.buttonStyle').hover(function(){$(this).removeClass('buttonStyle').addClass('overButtonStyle')},function(){$(this).removeClass('overButtonStyle').addClass('buttonStyle')})
</script>

//这是页面代码

<span  οnclick="doSearch()" class="buttonStyle">search</span> 
<span  οnclick="exportData();" class="buttonStyle">导出</span>