How to add Mouse Hover Effect on Grid View

Recently, One of My Friend asked me that how can we add Mouse Hover Effect on Grid View. So I want to share it with you too.

Firstly, This is the Sql Table Structure:

Create a New Website by clicking File->New Website.

Then,

Add a connection String to the Web.config file

Then, Add a GridView to the .aspx page

Now Add a style tag in the head tag of the .aspx page. Here is the .aspx page.

Now, In the Code Behind file
Add a class level variable to store Connection String and in the pageload event retrieve the connection string that we stored in the web.config file. For eg:

    static string constring;
    protected void Page_Load(object sender, EventArgs e)
    {
        constring = ConfigurationManager.ConnectionStrings["myConn"].ConnectionString;
        BindData();
    }
    protected void BindData()
    {
        using (SqlConnection con = new SqlConnection(constring))
        {
            con.Open();
            SqlDataAdapter adap = new SqlDataAdapter("Select * from MyCustomers", con);
            DataSet ds = new DataSet();
            adap.Fill(ds, "MyCustomers");
            GridView1.DataSource = ds.Tables[0];
            GridView1.DataBind();
        }
            foreach (GridViewRow row in GridView1.Rows)
            {
                row.Attributes.Add("onmouseover", "className = 'rowStyle'");
                row.Attributes.Add("onmouseout", "className = ''");
            }
    }

And run the Web site, Output will be shown like this