Highlight gridview row on mouse over using CSS in asp.net

Bind and highlight gridview row on mouse over example  in asp.netIntroduction:In  this article i will explain the way to  highlight GridView's row on mouse over i.e. when you move cursor over any GridView row it will get highlighted.It also looks attractive and give your application a new innovative look. There are many other ways to do this but using easiest and the optimized way is to use CSS class.

In previous articles i explained Show tool tip message using CSS and HTML and  Bind gridview and highlight row on mouse over in asp.net and Bind,Save,Edit,Update,Cancel,Delete,Paging example in GridView in asp.net C# and Bind,upload,download,delete image files from the gridview and Sorting in gridview by column header and Searching records in gridview records  


Implementation: let's create a web page to see it in action.

  • In the <head> tag of the asp.net design page(.aspx) write as:
<head runat="server">   
    <style type="text/css">
        #grdEmp tr.rowHover:hover
    {
        background-color:#cccccc;    
    }
    </style>
</head>
  • Now place a gridview data control on the design page(.aspx) and write as:
<asp:GridView ID="grdEmp" runat="server CssClass="rowHover" RowStyle-CssClass="rowHover">
</asp:GridView>

Note: You just need to call the class "rowHover" in CssClass and RowStyle-CssClass

Now over to you:

" I hope you have got the easiest CSS trick to highlight gridview row on mouse over in asp.net and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

2 comments

Click here for comments
Anonymous
admin
April 05, 2013 × This comment has been removed by a blog administrator.
avatar
Unknown
admin
March 10, 2014 ×

wht if i have to implement this code in a content page which is been linked to its master page

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..