如何仅使用 CSS 在 GridView 行中显示鼠标悬停效果？

Question

这可能是一件非常简单的事情，但我对 CSS 完全陌生。我只想能够在gridview中的行上具有鼠标悬停效果，如果悬停在行上，则更改行的颜色。 这段代码如下：

<%@ 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>

任何帮助将不胜感激！谢谢！

Answer 1

我解决了这个问题，这段代码如下：

1. 添加标签RowStyle-CssClass
2. 在 CSS 中添加 .GvGrid:hover

这是代码：

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

感谢cmets！

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> 

代码隐藏：

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

请注意，当 Web 服务器将页面发送回客户端时，ASP.NET gridview 会转换为 HTML 表格。以下代码将起作用。

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