Display Mouseover Effect In GridView Rows Using Only CSS

In this article i will show you how to display the mouseover effect in the gridview rows using only css. The code which i am going to show you is the simplest one which used for displaying the mouseover effect in the gridview rows using only css.
So here we go.
First you need to create a project . After creating a project add a blank page. In this blank page add a grid view control from your toolbox and bind it with table column.

<style type="text/css">
#GridView1 tr.rowHover:hover
{background-color: yellow;
font-family: Arial;
} </style>
<asp:GridView runat="server" AutoGenerateColumns="False" ID="GridView1" RowStyle-CssClass="rowHover" ClientIDMode="Static" >
<Columns>
<asp:BoundField DataField="AreaID" HeaderText="Area ID" />
<asp:BoundField DataField="AreaName" HeaderText="Area Name" />
<asp:BoundField DataField="IsDeleted" HeaderText="Is Deleted" />
</Columns>
</asp:GridView>

In above code i have added the style sheet to the gridview and on rowstyle-cssclass i have assign the style sheet class name.

Now open you web.config file and define connection string as shown below:

<add name="ConnectionString1" connectionString="Data Source=Servername;Initial Catalog=sodexo;udi=userid;pwd=password;Integrated Security=True"
providerName="System.Data.SqlClient" />

Now place the below code on page load.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e)
{DataTable dt = new DataTable();
SqlConnection objcon = newSqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString1"].ToString());
SqlDataAdapter objda = new SqlDataAdapter("select * from AreaTable", objcon);
objda.Fill(dt);if (dt.Rows.Count > 0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}

Above code description is as follows:
1. First we have define datatable.
2. Now define connectionstring 
3. Define sqldataadaptor with sql query
4. Now fill data table
5. Check weather we have got any record from data base or not. if count is greater the 0 then we will bind the grid.

Now run the code



Now place your mouse on grid you will get the desired output.

Tags: CSS/CSS3 , GridView