Gewusst wie: anzeigen die mouseover-Effekt im GridView Zeilen, die nur mithilfe von CSS?

Dies ist wahrscheinlich eine wirklich einfache Sache, aber ich bin komplett neu in CSS. Ich will einfach nur, um der Lage sein, mit mouseover-hover-Effekt auf meine Zeilen in gridview-Steuerelement, ändern Sie die Farbe für die Zeile, falls Sie mit der Maus auf.
Diesen code unter:

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

Jede mögliche Hilfe würde geschätzt! Danke!

CSS nicht wissen, oder kümmern uns um server-Seite asp.net markup. Bitte geben Sie den gerenderten HTML-Code.

InformationsquelleAutor navarend | 2014-04-05

Ich das problem beheben, diesen code unter:

Fügen Sie den tag RowStyle-CssClass
In der CSS hinzufügen .GvGrid:hover

Dies ist der 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">

Danke für die Kommentare!

InformationsquelleAutor navarend

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:

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

Vielen Dank für Ihre Kommentare, aber ich muss mit css kein code-behind.
Tolle Antwort und die einzige, die für mich funktioniert. Dank
Sie sind herzlich willkommen.

InformationsquelleAutor RGS

0

Bitte beachten Sie, dass ASP.NET gridview ist konvertiert in eine HTML Tabelle als web-server sendet die Seite an den client zurück. Der folgende code funktioniert.
```
.Gv tr:hover
{
    background-color: #000;
            font-family: Arial;
}
```
Ich verwende den code oben, aber beim laden der Seite wird nicht angezeigt, die Wirkung mouseover irgendeine Idee ?

InformationsquelleAutor Ajmal Amirzad

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.