Highlight GridView Row On MouseOver Using Javascript and CSS

Hello Friend,

Sometimes we need to give attractive look to a GridView by highlighting rows.

Now the query is how to make row hightlight?

Here i am giving a simple solution to make it workable. I am using the mousehover event and some javascript to make it workable.

First define two css class as below :

<style type="text/css">
.normalrow
{
background-color:white;
}
.highlightrow
{
background-color:lightgray;
}
</style>

void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e)
{
 
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
      e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
      e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
 
    }
 
}