Mouseover hover effect for asp.net Gridview using JQuery

Mouseover hover effect for asp.net Gridview using JQuery, someone asked me to explain?

gridview row selection in asp net

In this article I will show you how to create a mouse hover effect for asp.net gridview rows using jQuery. You can apply Css effects for a gridview using JQuery related Css methods like addClass, removeClass and toggleClass etc.

Create an asp.net application and drag a gridview control from the toolbox and add some properties as shown below. Now add a jQuery Script file reference inside the head section and also add JQuery Code and Css style inside it.

Asp.net gridview example: design Code

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#GridView1tbody tr').mouseover(function () {
            }).mouseout(function () {
            }).click(function () {


    <style type="text/css">
        th {
            text-align: left;
        .headerRow {
            background-color: #716969;
            color: White;
            font-weight: bold;
        .highlightRow {
            background-color: #dadada;
            cursor: pointer;
            border: solid 1px black;
        .selectedRow {
            background-color: #5e8ae4;
            cursor: pointer;
            border: solid 1px black;
            color: White;
  <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" BackColor="White" Font-Size="10"
                Font-Names="Verdana" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1px"
                CellPadding="3" Width="400px" CellSpacing="0" GridLines="Horizontal">

Code behind :Gridview events in asp.net:

On page Load event function I am binding the asp.net gridview with the datatable object .

  protected void Page_Load(object sender, EventArgs e)



private void LoadGrid()

            DataTable table = new DataTable();
            table.Columns.Add("ID", typeof(int));
            table.Columns.Add("Employee", typeof(string));
            table.Columns.Add("Salary", typeof(decimal));
            for (int i = 1; i < 8; i++)
                DataRow row = table.NewRow();
                row["ID"] = i;
                row["Employee"] = "Employee " + i;
                row["Salary"] =25000 * i;
            GridView1.DataSource = table;
            if (GridView1.Rows.Count > 0)
                GridView1.UseAccessibleHeader =true;
               GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

Run the application and see the mouse hover effect on the asp.net gridview.

Post your comments / questions