1: ASPX Page Code (Default.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mouse Hover Effects Using CSS</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvHover" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False"
GridLines="Vertical" CssClass="grid-view" OnRowCreated="gvHover_RowCreated">
<Columns>
<asp:BoundField HeaderText="n" DataField="n">
<HeaderStyle Width="25px" />
<ItemStyle Width="25px" />
</asp:BoundField>
<asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
2: Default.aspx.cs Page Code
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvHover.DataSource = GetDataTable();
gvHover.DataBind();
}
}
protected DataTable GetDataTable()
{
DataTable dTable = new DataTable();
DataRow dRow = null;
Random rnd = new Random();
dTable.Columns.Add("n");
dTable.Columns.Add("qbrtn");
dTable.Columns.Add("sqrtn");
for (int n = 1; n <= 10; ++n)
{
dRow = dTable.NewRow();
dRow["n"] = n + ".";
dRow["qbrtn"] = Math.Pow(n, 1D / 3D) + "";
dRow["sqrtn"] = Math.Sqrt(n) + "";
dTable.Rows.Add(dRow);
dTable.AcceptChanges();
}
return dTable;
}
protected void gvHover_RowCreated(object sender, GridViewRowEventArgs e)
{
//Add CSS class on header row.
if (e.Row.RowType == DataControlRowType.Header)
e.Row.CssClass = "header";
//Add CSS class on normal row.
if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Normal)
e.Row.CssClass = "normal";
//Add CSS class on alternate row.
if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Alternate)
e.Row.CssClass = "alternate";
}
}
3: StyleSheet.css Code
padding: 0;
margin: 0;
border: 1px solid #333;
font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
font-size: 0.9em;
}
color: white;
background-color: #FF5600;
height: 25px;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
color: black;
background-color: #FDC64E;
height: 25px;
vertical-align: middle;
text-align: center;
}
color: black;
background-color: #D59200;
height: 25px;
vertical-align: middle;
text-align: center;
}
background-color: white;
color: black;
font-weight: bold;
}
4: Demo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Mouse Hover Effects Using CSS</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvHover" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False"
GridLines="Vertical" CssClass="grid-view" OnRowCreated="gvHover_RowCreated">
<Columns>
<asp:BoundField HeaderText="n" DataField="n">
<HeaderStyle Width="25px" />
<ItemStyle Width="25px" />
</asp:BoundField>
<asp:BoundField HeaderText="sqrt(n)" DataField="sqrtn">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="qbrt(n)" DataField="qbrtn">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
2: Default.aspx.cs Page Code
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gvHover.DataSource = GetDataTable();
gvHover.DataBind();
}
}
protected DataTable GetDataTable()
{
DataTable dTable = new DataTable();
DataRow dRow = null;
Random rnd = new Random();
dTable.Columns.Add("n");
dTable.Columns.Add("qbrtn");
dTable.Columns.Add("sqrtn");
for (int n = 1; n <= 10; ++n)
{
dRow = dTable.NewRow();
dRow["n"] = n + ".";
dRow["qbrtn"] = Math.Pow(n, 1D / 3D) + "";
dRow["sqrtn"] = Math.Sqrt(n) + "";
dTable.Rows.Add(dRow);
dTable.AcceptChanges();
}
return dTable;
}
protected void gvHover_RowCreated(object sender, GridViewRowEventArgs e)
{
//Add CSS class on header row.
if (e.Row.RowType == DataControlRowType.Header)
e.Row.CssClass = "header";
//Add CSS class on normal row.
if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Normal)
e.Row.CssClass = "normal";
//Add CSS class on alternate row.
if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Alternate)
e.Row.CssClass = "alternate";
}
}
3: StyleSheet.css Code
.grid-view
{padding: 0;
margin: 0;
border: 1px solid #333;
font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
font-size: 0.9em;
}
.grid-view tr.header
{color: white;
background-color: #FF5600;
height: 25px;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.grid-view tr.normal
{color: black;
background-color: #FDC64E;
height: 25px;
vertical-align: middle;
text-align: center;
}
.grid-view tr.alternate
{color: black;
background-color: #D59200;
height: 25px;
vertical-align: middle;
text-align: center;
}
.grid-view tr.normal:hover, .grid-view tr.alternate:hover
{background-color: white;
color: black;
font-weight: bold;
}
4: Demo
