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

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

添加标签 RowStyle-CssClass
在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">

感谢您的评论！

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;
}

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

3 个答案: