JQuery hover( ) mouse event in ASP.NET using VB.NET
Discription about using JQuery hover mouse event to highlight table row record based on user interaction.
Using JQuery hover( ) mouse event you can highlight table row record based on user interaction. The hover( ) mouse event allow to attach two event handlers to the matched elements, and when the mouse enters to leave the matched elements it will be executed.
Syntax
$("#id").hover(A, B);
Where A denotes the function to call when the mouse enters the matched element
and B when the mouse leaves the matched element.
JQuery Snippets Code
<script type="text/javascript">
$("tr").not(':first').hover(
function ()
{
$(this).css("background", "yellow");
},
function ()
{
$(this).css("background", "");
}
);
</script>
Header Section Code
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="JScript.js"></script>
<style type="text/css">
.style1 {
width: 105px;
}
.style3
{
width: 127px;
}
.style4
{
width: 69px;
}
.style6
{
font-family: Verdana;
font-size: small;
font-weight: normal;
}
.style7
{
width: 131px;
}
.style8
{
color: #F3F3F3;
}
</style>
</head>
<body>
<h1 class="style6"><strong>Employees Detail of XYZ Software solutions Co.</strong></h1>
<table border="1"
style="font-family: Verdana; font-size: small; background-color: #F3F3F3;">
<tr><th>EmpId</th><th>EmpName</th><th>Qualifications</th><th>DateOfJoin</th><th>Salary</th>
<th>ContactNo.</th></tr>
<tr><td>101</td><td>Ramesh Kumar</td><td>Graduate</td><td>15-01-2010</td><td>8000</td><td>333444</td></tr>
<tr><td>102</td><td>Rahul Gupta</td><td>Graduate</td><td>01-02-2010</td><td>8000</td><td>555222</td></tr>
<tr><td>103</td><td>Hemant Saxena </td><td>PostGraduate</td><td>01-04-2010</td><td>12000</td><td>222444</td></tr>
<tr><td>104</td><td>Shikha Singh</td><td>Graduate</td><td>15-06-2010</td><td>6000</td><td>333777</td></tr>
<tr><td>105</td><td>Deepak Kumar</td><td>PostGraduate</td><td>10-08-2010</td><td>12000</td><td>666444</td></tr>
<tr><td>106</td><td>Hari Kishan</td><td>UnderGraduate</td><td>01-12-2010</td><td>4000</td><td>888222</td></tr>
</table>
</body>
Output
Color of the row will be highlight as you moves the cursor up and down.
Have a nice learning JQuery.