mouseover hover in Gridview ASP.net using CSS

Question

This is probably a really simple thing but I am completely new to CSS. I just want to be able to have mouseover hover effect on my rows in gridview, changing the color of the row if it is being hovered over. I'm curious as to whether or not my CSS file is in the right place? Should my Gridview.CSS be in the same folder as my gridview.aspx (I assume so?).

Here is my CSS file:

.Gridview tr.normal
 {
   background-color:white;
 }

 .Gridview tr.highlight
  {
     background-color:yellow;
  }

And here is how I am trying to implement it: In the .aspx file:

 <asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">

And in the C# code behind:

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "highlight";
        }
    }

I know I must be missing something really simple in my C#. Any help would be appreciated! Thanks!

Solution 1

I stole part of my solution to this from another answer so my styling affects ALL gridviews in one shot.

Add this CssClass="GridView" to your asp:GridView tag.

<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">

Then in your style.css you can do things like the following:

table.GridView th {
  border-bottom: 1px solid #ED7A0A;
  text-decoration: none;
}

table.GridView tr:hover {
  background-color: #fabf85;
}

The key is the :hover pseudo-class.

Solution 2

First you set the Row style using this code, inside the GridView, I call it .row

<RowStyle CssClass="row"  />

then you use this css to make it change the background color, or what ever you like when the mouse is move over.

tr.row
{
    background-color:#fff;
}


tr.row td
{ 
}

tr.row:hover td, 
tr.row.over td
{ 
    background-color: #eee;
}

The trick here is that because GridView is rendered as table, I add the td and the tr in the style to access the mouse over the table lines.

Because there is also the alternative row style AlternatingRowStyle if you like to use it, you can simple make one more style the same way.

Solution 3

Here is how I accomplished this:

Follow this tutorial to change the highlighted row on mouseover:

http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx

This also explains the code to process a row selection. My gridview has alternating row colors. In order to restore the original color of the row you just hovered, create a custom attribute in mouseover for the original backgroundColor and restore it on mouseOut like so:

row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";

row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";