How to display mouseover effect in GridView rows using only 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. This code below:

<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/MasterPage.master" CodeFile="RepComisionesDos.aspx.vb" Inherits="Contraloria_Nomina_RepComisionesDos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="E" runat="Server">
<style>     
      #Gv tr.rowHover:hover
        {
            background-color: Yellow;
            font-family: Arial;
        }
</style>
   <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr class="BarraIdentidad">
        <td>
            &nbsp;&nbsp;
        </td>
        <td class="BarraIdentidad">
            &nbsp;<asp:Literal ID="Literal1" runat="server">Users</asp:Literal>
        </td>
    </tr>      
 </table>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="C" runat="Server">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr class="Encabezado" id="TrFiltros" runat="server">
    <td style="width: 15px;">
        &nbsp;&nbsp;          
    </td>
    <td>
        <asp:UpdatePanel ID="UPFiltro" runat="server" UpdateMode="Conditional">
         <ContentTemplate>

            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="TbFiltros" runat="server" clientidmode="Static">
                    <tr class="Encabezado">
                        <td>
                            Plaza:
                        </td>
                    </tr>
            </table>
        <tr>

    <td>
        <asp:UpdatePanel ID="UPDatos" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table runat="server" >
                    <tr>
                        <td>
                            <asp:GridView ID="Gv" runat="server" AutoGenerateColumns="False" ClientIDMode="Static" RowStyle-CssClass="rowHover"
                                CellPadding="1" OnRowDataBound="Gv_RowDataBound"> 
                                 <Columns>
                                    <asp:BoundField DataField="MES_ANIO" HeaderText="MES">
                                        <ItemStyle Width="80px" CssClass="tdIzq" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="PERIODO" HeaderText="PERIODO">
                                        <ItemStyle Width="80px" CssClass="td" />
                                    </asp:BoundField>
                                    <asp:HyperLinkField DataNavigateUrlFields="CVE_USUARIO" HeaderText="USUARIO" DataNavigateUrlFormatString="/Ventas/RepArchivoPersonalAuxiliarEmp.aspx?prospecto={0}"
                                        DataTextField="USUARIO">
                                        <ItemStyle Width="180px" CssClass="tdUsuario" />
                                    </asp:HyperLinkField>
                                     </Columns>
                            </asp:GridView> 
                           </td>
                        </tr>
                   </table> 
</asp:Content>

Any help would be appreciated! Thanks!

Answer 1

I resolve the problem, this code below:

1. Add the tag RowStyle-CssClass
2. In the CSS add .GvGrid:hover

This is the code:

 <style>
     .GvGrid:hover
        {
            background-color: #FFEB9C;
            border-top: solid;
            color:#9C6500;
        }
 </style>

   <asp:GridView ID="Gv" runat="server" AutoGenerateColumns="False" ClientIDMode="Static" RowStyle-CssClass="GvGrid" CellPadding="1">

Thanks for the comments!

Answer 2

HTML:

 <asp:GridView ID="Gv" runat="server" AutoGenerateColumns="False"
                                CellPadding="1" OnRowDataBound="Gv_RowDataBound"> 
               <Columns>
                      <asp:BoundField DataField="MES_ANIO" HeaderText="MES">
                                        <ItemStyle Width="80px" CssClass="tdIzq" />
                                    </asp:BoundField>
                      <asp:BoundField DataField="PERIODO" HeaderText="PERIODO">
                                        <ItemStyle Width="80px" CssClass="td" />
                                    </asp:BoundField>
                      <asp:HyperLinkField DataNavigateUrlFields="CVE_USUARIO" HeaderText="USUARIO" DataNavigateUrlFormatString="/Ventas/RepArchivoPersonalAuxiliarEmp.aspx?prospecto={0}"
                                        DataTextField="USUARIO">
                                        <ItemStyle Width="180px" CssClass="tdUsuario" />
                                    </asp:HyperLinkField>
              </Columns>
 </asp:GridView> 

Code Behind:

protected void Gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) {
        e.Row.Attributes.Add("onMouseOver", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#f1f3f5';this.style.cursor='pointer';");
        e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor=this.originalstyle;");
    }   
}

Answer 3

Please note that ASP.NET gridview is converted into HTML table when web server sends the page back to the client. The following code will work.

.Gv tr:hover
{
    background-color: #000;
            font-family: Arial;
}