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!

Answer 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.