$(document).ready(function () {
$(".thisDiv").hover(function () {
$(".thisDiv").addClass(function (index) {
if (index == 0) {
return "Green";
}
if (index == 1) {
return "Yellow";
}
if (index == 2) {
return "Aqua";
}
else {
return false;
}
});
});
$("#reset").click(function () {
location.reload();
});
});
<html>
<head>
<title>addClass</title>
</head>
<body>
<table>
<tr>
<td>
<span class="thisDiv">Hover Me 1</span>
</td>
<td>
<span class="thisDiv">Hover Me 2</span>
</td>
<td>
<span class="thisDiv">Hover Me 3</span>
</td>
</tr>
</table>
<input type="button" id="reset" Value="Reset" />
</body>
</html>
.thisDiv
{
background-color:Red;
width:200px;
height:200px;
display:block;
}
.Green
{
background-color:Green!important;
}
.Yellow
{
background-color:Yellow!important;
}
.Aqua
{
background-color:aqua!important;
}