5,316,172 members and growing! (18,603 online)
Email Password   helpLost your password?
Web Development » ASP.NET Controls » Grid Controls     Intermediate License: The Code Project Open License (CPOL)

Hover Effects for GridView Rows Using CSS

By SAMir Nigam

This article describes how to apply hover effects on GridView rows using CSS.
C# (C# 2.0, C#), Javascript, CSS, HTML, XHTML, JScript .NET, .NET (.NET, .NET 2.0), IE (IE 7, IE), ASP.NET, Ajax, ADO.NET, Dev

Posted: 12 May 2008
Updated: 12 May 2008
Views: 8,795
Announcements
Want a new Job?



Search    
Advanced Search
Sitemap
25 votes for this Article.
Popularity: 5.74 Rating: 4.10 out of 5
1 vote, 4.0%
1
1 vote, 4.0%
2
4 votes, 16.0%
3
2 votes, 8.0%
4
17 votes, 68.0%
5

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:

//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";

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:

Browsers.png

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

SAMir Nigam


Currently I'm working as a Sr. Software Engineer in SRM Techsol Pvt. Ltd., Lucknow, INDIA. I possess following degrees:

  • MCA from U.P. Technical University, Lucknow, INDIA.
  • PGDCA from Institute of Engineering and Rural Technology, Allahabad, INDIA.
  • BSc from University of Allahabad, Allahabad, INDIA.


Occupation: Software Developer (Senior)
Company: STPL
Location: India India

Other popular ASP.NET Controls articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 17 of 17 (Total in Forum: 17) (Refresh)FirstPrevNext
Subject  Author Date 
GeneralHow to select a row by a simple mouse click?memberMember 18125390:23 3 Jul '08  
GeneralRe: How to select a row by a simple mouse click?memberSAMir Nigam19:22 3 Jul '08  
Generalwhy use code behind page to attach CSS classmemberMohm'ed Melhem20:00 10 Jun '08  
GeneralRe: why use code behind page to attach CSS classmember SAMir Nigam21:57 10 Jun '08  
Questiondoesn't work with IE6memberMayuresh8011:13 9 Jun '08  
AnswerRe: doesn't work with IE6member SAMir Nigam 19:13 9 Jun '08  
AnswerRe: doesn't work with IE6member SAMir Nigam 2:10 17 Jun '08  
GeneralGreate! Thanks!memberHugoGonc1:06 29 May '08  
GeneralRe: Greate! Thanks!member SAMir Nigam 2:48 29 May '08  
GeneralProblem using your examplememberAitorku7:19 27 May '08  
GeneralcomRe: Problem using your example [modified]member SAMir Nigam 19:11 28 May '08  
Generaldifferent and gud onemembersan_geit0:27 13 May '08  
GeneralRe: different and gud onemember Samir Nigam 0:33 13 May '08  
GeneralUse Javascript for the same.. Which one will be better when we consider the page performance?membersrinath g nath19:57 12 May '08  
GeneralRe: Use Javascript for the same.. Which one will be better when we consider the page performance?member Samir Nigam 1:09 13 May '08  
Generalgreate ... But....memberAbhijit Jana5:01 12 May '08  
GeneralRe: greate ... But....member Samir Nigam 18:40 12 May '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 12 May 2008
Editor: Smitha Vijayan
Copyright 2008 by SAMir Nigam
Everything else Copyright © CodeProject, 1999-2008
Web08 | Advertise on the Code Project