Home Tutorial Jquery Auto select cell on mouse hover using 'hover' mouse event

 
 

Share on Google+Share on Google+
Auto select cell on mouse hover using 'hover' mouse event
Posted on: August 2, 2010 at 12:00 AM
Advertisement
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&nbsp; </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

Advertisement

Related Tags for Auto select cell on mouse hover using 'hover' mouse event:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com