Click here to Skip to main content
15,180,249 members
Articles / Web Development / XHTML
Article
Posted 12 May 2008

Stats

300.1K views
5.2K downloads
81 bookmarked

Hover Effects for GridView Rows Using CSS

Rate me:
Please Sign up or sign in to vote.
4.36/5 (42 votes)
12 May 2008CPOL2 min read
This article describes how to apply hover effects on GridView rows using CSS.

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.NET
<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.NET
<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:

C#
//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:

HTML
.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:

HTML
.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:

HTML
<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)

Share

About the Author

Samir NIGAM
Technical Lead Infogain India Pvt Ltd
India India


Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.



He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.



He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.



Awards:



Comments and Discussions

 
GeneralMy Reason for Rate 4 Pin
Member 1096742920-Oct-14 20:48
MemberMember 1096742920-Oct-14 20:48 
GeneralMy vote of 5 Pin
Chris Hoch30-Aug-14 14:50
MemberChris Hoch30-Aug-14 14:50 
QuestionHow to call style on hover evernt of the grid view in asp.net 4.0 Pin
Harishankar Maurya20-Mar-14 1:23
MemberHarishankar Maurya20-Mar-14 1:23 
GeneralMy vote of 3 Pin
Shaileshcall429-Dec-12 0:44
MemberShaileshcall429-Dec-12 0:44 
GeneralMy vote of 4 Pin
gajendra bahakar7-Oct-11 21:25
Membergajendra bahakar7-Oct-11 21:25 
GeneralGood work Samir. Pin
Bo Vistisen29-Dec-09 1:46
MemberBo Vistisen29-Dec-09 1:46 
To Daniel Nutu. This is not fair to rate it 1. I will show you why.
To Hermant026. It is not fair to rate 1. I will show you how to change the colors.
To you who found problems with IE6. I will show you how to work around this problem.

To Samir.

I will rate it Excellent.
You made a nice article.
Yes there is a problem with IE6 but you are not to blame.
Yes people always want more or other solutions they can not program.

But let us start with the IE6 problem.
The solution is not a pure css solution. It is more an add-on solution.
I normally use the same kind of programming to reach a solution that you use in this example.

First we add a reference to an event in the HTML code, just like the OnRowCreated.
OnRowDataBound="gvHover_RowDataBound"


Then we add the event to the code behind. I have added both normal and alternate events if someone needs to differ.
protected void gvHover_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    //Add javascript function on normal row.
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Normal)
    {
        e.Row.Attributes.Add("onmouseover", "Highlight_OnNormal(this);");
        e.Row.Attributes.Add("onmouseout", "Highlight_Off(this);");
    }

    //Add javascript function on alternate row.
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowState == DataControlRowState.Alternate)
    {
        e.Row.Attributes.Add("onmouseover", "Highlight_OnAlternate(this);");
        e.Row.Attributes.Add("onmouseout", "Highlight_Off(this);");
    }
}


Finally we need to define the javascript functions. We do this by adding them in the HEAD section of the HTML code.
<script type="text/javascript">
    function Highlight_OnNormal(obj)
    {
        if(obj != null)
        {
            obj.originalBgColor = obj.style.backgroundColor;
            obj.originalColor = obj.style.Color;
            obj.originalWeight = obj.style.fontWeight;
            obj.style.backgroundColor = '#FFFFFF';
            obj.style.color = '#000000';
            obj.style.fontWeight= 'bold';
        }
    }
    function Highlight_OnAlternate(obj) {
        if (obj != null) {
            obj.originalBgColor = obj.style.backgroundColor;
            obj.originalColor = obj.style.Color;
            obj.originalWeight = obj.style.fontWeight;
            obj.style.backgroundColor = '#FFFFFF';
            obj.style.color = '#000000';
            obj.style.fontWeight = 'bold';
        }
    }
    function Highlight_Off(obj)
    {
        if(obj != null)
        {
            obj.style.backgroundColor = obj.originalBgColor;
            obj.style.Color = obj.originalColor;
            obj.style.fontWeight = obj.originalWeight;
        }
    }
</script>


Thats it.

To Hermant026 you can try to change the obj.style.backgroundColor = '#FFFFFF'; to #00FFFF and the scroll coler will change.
To LMRT09 that want to hover a imagebuttom. This can be done very easy or by using the same kind of code solution used here. I will answer your Message.

Thank you and Happy New Year 2010.

Bo Vistisen
GeneralRe: Good work Samir. Pin
Samir NIGAM29-Dec-09 18:14
MemberSamir NIGAM29-Dec-09 18:14 
GeneralMy vote of 1 Pin
Daniel Nutu7-Oct-09 23:15
MemberDaniel Nutu7-Oct-09 23:15 
GeneralRe: My vote of 1 Pin
Samir NIGAM29-Dec-09 18:08
MemberSamir NIGAM29-Dec-09 18:08 
Questionadding a hover effect to an ImageButton control Pin
LMRT0926-Aug-09 12:47
MemberLMRT0926-Aug-09 12:47 
AnswerRe: adding a hover effect to an ImageButton control Pin
Bo Vistisen29-Dec-09 2:33
MemberBo Vistisen29-Dec-09 2:33 
GeneralMy vote of 1 Pin
Hemant0266-Aug-09 3:35
MemberHemant0266-Aug-09 3:35 
GeneralRe: My vote of 1 Pin
Samir NIGAM29-Dec-09 18:06
MemberSamir NIGAM29-Dec-09 18:06 
GeneralGreat work Pin
grantmasterb3-Jul-09 9:32
Membergrantmasterb3-Jul-09 9:32 
GeneralRe: Great work Pin
Samir NIGAM3-Jul-09 20:51
MemberSamir NIGAM3-Jul-09 20:51 
GeneralGood work samir Pin
deepak_rai6-Mar-09 21:04
Memberdeepak_rai6-Mar-09 21:04 
GeneralRe: Good work samir Pin
Samir NIGAM8-May-09 19:00
MemberSamir NIGAM8-May-09 19:00 
Generalok good Pin
ahlawy420-Jan-09 1:44
Memberahlawy420-Jan-09 1:44 
GeneralRe: ok good Pin
Samir NIGAM8-May-09 19:00
MemberSamir NIGAM8-May-09 19:00 
GeneralStyling the GridView’s Header Row, Normal Row, and Alternate Row Pin
alexey.nayda26-Aug-08 2:05
Memberalexey.nayda26-Aug-08 2:05 
GeneralRe: Styling the GridView’s Header Row, Normal Row, and Alternate Row Pin
Samir NIGAM8-May-09 19:02
MemberSamir NIGAM8-May-09 19:02 
QuestionHow to select a row by a simple mouse click? Pin
Member 18125393-Jul-08 0:23
MemberMember 18125393-Jul-08 0:23 
AnswerRe: How to select a row by a simple mouse click? Pin
Samir NIGAM3-Jul-08 19:22
MemberSamir NIGAM3-Jul-08 19:22 
Generalwhy use code behind page to attach CSS class Pin
Mohm'ed Melhem10-Jun-08 20:00
professionalMohm'ed Melhem10-Jun-08 20:00 
GeneralRe: why use code behind page to attach CSS class Pin
Samir NIGAM10-Jun-08 21:57
MemberSamir NIGAM10-Jun-08 21:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.