mouseover hover in Gridview ASP.net using CSS

user_1355120 0
Viewed 29911

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!

mouseover hover gridview asp.net c#
10 Answers

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

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

user_107679690
Related