Auto select cell on mouse hover using 'hover' mouse event
In this tutorial, we will discuss about how to highlight Table's cell on mouse hover using jQuery 'hover' mouse event.
In this tutorial, we will discuss about how to highlight Table's cell on mouse hover using jQuery 'hover' mouse event.
Auto select cell on mouse hover using 'hover' mouse event
In this tutorial, we will discuss about how to highlight Table's cell on
mouse hover using jQuery 'hover' mouse event. In this example, a table is given,
when we hover mouse on it , it will highlight the cell by changing background of
the cell.
hoverMouseEvent.html
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.style1 {
border-style: solid;
border-width: 1px;
}
.style2 {
color: #0000FF;
}
td.hover { background:#B0E0E6; }
.style3 {
color: #FF0000;
}
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<h3><font color="purple">Hover Mouse on cell to see effect</font></h3>
<table style="width: 23%" class="style1" border="1">
<tr>
<td style="width: 157px" class="style3"><strong>COUNTRY</strong></td>
<td style="width: 217px" class="style3"><strong>CAPITAL</strong></td>
</tr>
<tr>
<td style="width: 157px" class="style2">INDIA</td>
<td style="width: 217px" class="style2">NEW DELHI</td>
</tr>
<tr>
<td style="width: 157px" class="style2">PAKISTAN</td>
<td style="width: 217px" class="style2">ISLAMABAD</td>
</tr>
<tr>
<td style="width: 157px" class="style2">U.S.A.</td>
<td style="width: 217px" class="style2">WASHIGTON<br>
DC </td>
</tr>
<tr>
<td style="width: 157px" class="style2">JAPAN</td>
<td style="width: 217px" class="style2">TOKYO</td>
</tr>
</table>
<script>
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
|
OUTPUT
When hover on 4th row & 2nd column :

Download Source Code
Click
here to see demo