js 鼠标移过去渐变的效果（页面固定 定位栏）

1.html代码

<div id="locationDiv"
			style="color:rgba(0,0,0,0.6);border-radius:10px;left: 98%; top: 25%; border: 1px solid #CCCCCC; position: fixed; width: 100px; margin-left: -100px; heigth: 80px;background:#F5F5F5;">
			<div class="hover"
				style="text-align: center; cursor: pointer; padding-top: 2px;"
				name="1">xxxx</div>
			<div class="hover"
				style="margin-top: 4px; text-align: center; cursor: pointer;"
				name="2">xxxxx</div>
			<div class="hover"
				style="margin-top: 4px; text-align: center; cursor: pointer;"
				name="3">xxx</div>
			<div class="hover"
				style="margin-top: 4px; text-align: center; cursor: pointer;"
				name="4">xx</div>
		</div>

2.Css代码

<style type="text/css">
.hover:hover {
	background: #2B9DEE;
	border-radius:10px;
/*  	transition: all 0.4s ease-in-out 0s;  */
	color: rgba(0,0,0,1);
}
table tr th{
	vertical-align:sub;
}
</style>

3.js代码

jQuery(".hover").mouseover(function(){
				jQuery("#locationDiv").css("color","rgba(0,0,0,1)");
			});
			jQuery(".hover").mouseout(function(){
				jQuery("#locationDiv").css("color","rgba(0,0,0,0.6)");
			});