How to display mouseover effect in GridView rows using only CSS?


Tags: asp.net,css,gridview,mouseover

Problem :

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!



Solution :

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!


    CSS Howto..

    Pure CSS3 slideshow repeats the last 4 slides?

    How to Change Elements Before & After Navbar Collapse?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to apply bootstrap css to all buttons

    CSS Selector-How to locate Parent Element

    How to restrict the css star selector * to a class and all decendants?

    How to prevent the scroll of table when click to header on Chrome?

    How can i fit my webPage in browser when user makes browser window big?

    How to override custom placeholder css

    How to force a list to be vertical using html css

    how to make yo angular load bootstrap theme css

    How to avoid HTML element being matched by CSS and reset it?

    How to disable CSS minifier in Liferay?

    How to have 100% width for last column only in html and css?

    How do I add a CSS3 transition to an image overlay?

    How to make div elements inside a div background image responsive using css

    How do I get CSS table columns to line up?

    How to format text wrapped inside specific symbols within a html structure and format it

    How to remove the blank between div.sons?

    How can I apply an existing CSS class style to a dynamically created div?

    AngularJS how to put both ng-class and CSS class

    How to remove left and right margin on first and last div

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to float div in CSS?

    How would I achieve this CSS effect (centering content and padding)?

    How to use css control to focus on div background when href link clicked

    How do I use a variable to get CSS info on an element?

    How achieve rounded shadow behide a rounded element using css3

    show the div inside that div next to it

    How to set variables in LESS from a dynamic website?