How to display mouseover effect in GridView rows using only CSS?
13,827
Solution 1
I resolve the problem, this code below:
- Add the tag RowStyle-CssClass
- 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!
Solution 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;");
}
}
Author by
navarend
Updated on June 26, 2022Comments
-
navarend almost 2 years
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> </td> <td class="BarraIdentidad"> <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;"> </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!
-
navarend about 10 yearsI use the code above but when the page load is not display the effect mouseover any idea ?
-
navarend about 10 yearsThanks for your comments but I need to do using css no code-behind.