Introduction
Last week, I learned a technique of applying a hover effect to an HTML table’s rows with the help of pure CSS, without using a single line of JavaScript
code. Great! Isn’t it? Before that, I’ve been doing this using JavaScript, as in my previous article: Hotmail-like Mouse Over and Mouse Out Effects on GridView. I thought it might be interesting to implement this technique on a GridView
in order to create a hover effect on the GridView
rows. So, I’ve quickly created a sample application and decided to share it. Below is the implementation details of this technique for applying hover effect to GridView
rows using CSS.
The GridView HTML Code
The HTML code for the GridView
in this article will looks like:
<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>
Styling the GridView
In order to style the Gridview
, attach a CSS class to it, like so:
<asp:GridView ... CssClass="grid-view" ... > ... </asp:GridView>
Styling the GridView’s Header Row, Normal Row, and Alternate Row
In order to style the GridWiew
’s header, normal, and alternate rows, attach the CSS classes to these rows through the RowCreated
event of the GridView
, as:
if (e.Row.RowType == DataControlRowType.Header)
e.Row.CssClass = "header";
if (e.Row.RowType == DataControlRowType.DataRow &&
e.Row.RowState == DataControlRowState.Normal)
e.Row.CssClass = "normal";
if (e.Row.RowType == DataControlRowType.DataRow &&
e.Row.RowState == DataControlRowState.Alternate)
e.Row.CssClass = "alternate";
The CSS Classes
Below are the CSS classes that have been used above to style the GridView
and its header, normal, and alternate rows:
.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;
}
Adding a Hover Effect to the GridView rows
Finally, to apply the hover effect to the GridView
rows, the following CSS is used:
.grid-view tr.normal:hover, .grid-view tr.alternate:hover
{
background-color: white;
color: black;
font-weight: bold;
}
Note that the hover effect has been applied to the normal and alternate rows only, not on the header row. You can also use different color schemes for the normal and alternate rows separately, for the hover effect.
Using the CSS Classes
Put all the corresponding CSS classes in a stylesheet and give its reference on the web page’s head
section, as:
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
Conclusion
That’s all about this technique. Just download the sample application and happy CSS! I have tested this application on various browsers and it worked fine. Below is the list of those browsers: