使用 CSS 将鼠标悬停在 Gridview ASP.net 中

Question

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. I'm curious as to whether or not my CSS file is in the right place? Should my Gridview.CSS be in the same folder as my gridview.aspx (I assume so?).

Here is my CSS file:

.Gridview tr.normal
 {
   background-color:white;
 }

 .Gridview tr.highlight
  {
     background-color:yellow;
  }

And here is how I am trying to implement it: In the.aspx file:

 <asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">

And in the C# code behind:

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "highlight";
        }
    }

I know I must be missing something really simple in my C#. Any help would be appreciated! Thanks!

Answer 1

I stole part of my solution to this from another answer so my styling affects ALL gridviews in one shot.

Add this CssClass="GridView" to your asp:GridView tag.

<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">

Then in your style.css you can do things like the following:

table.GridView th {
  border-bottom: 1px solid #ED7A0A;
  text-decoration: none;
}

table.GridView tr:hover {
  background-color: #fabf85;
}

The key is the :hover pseudo-class.

Answer 2

First you set the Row style using this code, inside the GridView, I call it .row

<RowStyle CssClass="row"  />

then you use this css to make it change the background color, or what ever you like when the mouse is move over.

tr.row
{
    background-color:#fff;
}


tr.row td
{ 
}

tr.row:hover td, 
tr.row.over td
{ 
    background-color: #eee;
}

The trick here is that because GridView is rendered as table, I add the td and the tr in the style to access the mouse over the table lines.

Because there is also the alternative row style AlternatingRowStyle if you like to use it, you can simple make one more style the same way.

Answer 3

Here is how I accomplished this:

Follow this tutorial to change the highlighted row on mouseover:

http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx

This also explains the code to process a row selection. My gridview has alternating row colors. In order to restore the original color of the row you just hovered, create a custom attribute in mouseover for the original backgroundColor and restore it on mouseOut like so:

row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";

row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";

Answer 4

You can create hover effect using RowCreated because this will need postback for this. You should use hover pseudo-class within you css. Something like this

.Gridview tr:hover
{
  background-color:blue;
  color:white;
}

where Gridview css class applied to your Gridview

Answer 5

This is how i done in my project

CSS:

.tdonhover { background-color:#d9d9d9;important; }

<script type="text/javascript">
        $(document).ready(function () {
         $('td').hover(function () {
                $('tr').each(function () {
                    $(this).removeClass('tdonhover');
                });
                $(this).parent().addClass('tdonhover');
            });
          });

    </script>

Default.aspx page: This page contains gridview control.

               ` <asp:GridView ID="GridView1" runat="server" CellPadding="4" Width="940px" CssClass="gvClass gvalign" BorderColor="#E0DCD0" BorderStyle="Solid" BorderWidth="1px"
                       ForeColor="#333333" GridLines="None" >
                        <Columns>
                        <asp:TemplateField HeaderText="Srno" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="40">
                            <ItemTemplate>
                                <%# Container.DataItemIndex+1 %>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                    <RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#A86E07" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
                </asp:GridView>`

Using

<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />

you can set Alternate row Background color and fontcolor

Answer 6

This is so simple thing.

add the CSS in head part

#MainContent_gvDevice tr:Hover
{  
    background-color:#F6F6F6;
}

here instead of gvDevice put your gridview id.

Answer 7

Better way yo can handle this mouseover using OnRowCreated

protected void RowCreated_report(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='yellow'");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
                e.Row.Attributes.Add("style", "cursor:pointer;");
            }
}

Answer 8

I think I have the shortest and easiest solution to implement so far. There is no need to edit code behind or id/class names. The only edit you need to make is adding this CSS:

tr[class^='dxgvDataRow']:hover td{ 
    background-color: #272727 !important;
}

Answer 9

 protected void grdDis_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {


            #region to highlight the grid view row 
            e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
            #endregion
}
}

Answer 10

This is for column cell hover color in the Gridview with ToolTip and ForeColor

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[2].Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';this.style.backgroundColor='aqua'";
        e.Row.Cells[2].Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor='white'";
        e.Row.Cells[2].ToolTip = "You can click this cell";
        e.Row.Cells[2].ForeColor = System.Drawing.Color.Blue;
    }
}

Thank you