How to display mouseover effect in GridView rows using only CSS?

Introduction

Here we have used CSS style class which defines the GridView’s row property that helps to display the hover effect when we will move mouse over that. The RowStyle-CssClass property of the GridView has been set as “rowHover”; when GridView renders on the page, each row of the GridView (GridView is rendered on the page as html table) is rendered with “rowHover” CSS class that only takes effect when we mouse hover on the GridView row.

Get solution hundreds of real time .NET How to’s like this, click here.

Steps to follow

Define following CSS style in the .css file or on the .aspx page itself.

ASPX Page:

 
<style type="text/css">
#GridView1 tr.rowHover:hover
{
background-color: Yellow;
font-family: Arial;
}
</style>
<asp:GridView ID="GridView1" runat="server" EnableViewState="false" RowStyle-CssClass="rowHover" ClientIDMode="Static" />

Note that the important thing here is the ID of the GridView. When GridView rendered on the page it’s id should be GridView1 that is why we have set ClientIDMode=static.

The CSS class name is rowHover with filtration that instruct the browser that this CSS class should be applied only to the element having id as “GridView1” with “tr” element having class=”rowHover” and only when user mouse over it.

In this CSS class we have specified the background color to “Yellow” and font family to “Arial”.

CODE Behind:

 
string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
 
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetData();
}
}

 
private void GetData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
// specify the data source for the GridView
GridView1.DataSource = table;
// bind the data now
GridView1.DataBind();
}

In the above code snippet, the code behind code is just to populate records from the database to the GridView.

Now when we run this page, we get the output as shown below. When user mouse hover the background color of the rows are changed to Yellow and font is changed to Arial.

Conclusion

By setting the RowStyle-CssClass property to filtered CSS class, we can display mouseover effect on GridView rows.