Highlight GridView Rows using CSS on MouseHover

I came across quite a few people facing problems in highlighting the rows of a GridView on mouse hover, here i will be discussing the ways to do the same Using CSS

Create a GridView and bind it .(If you are unsure about to Bind a GridView i suggest going to MSDN and checking out the steps there ,You will find a lot of good articles there .)

Your gridview Should look Something like this ( I am sure the fields etc are different ,but don't worry that is because of the different datasources etc) 

Now add this CSS tag to you GridView Code 

CssClass="GridView"

 In the Head tag of your page Copy and paste this code

<style type="text/css">
.GridView tbody tr:hover, .GridView tbody tr:hover td, .GridView tbody tr.hover, .GridView tbody tr.hover td
{background:#A7CCDF;color:#333}

</style>

Your GridView will look like the above figure when you mouse hover .

You can change the color of the highlighted row by changing the color in the css here

 color:#333

 You can add more functionality like increasing the font size by this

 .GridView tbody tr:hover, .GridView tbody tr:hover td, .GridView tbody tr.hover, .GridView tbody tr.hover td
{background:#A7CCDF;color:#333;font-size:11px}

In the Next articles i will be discussing how to do the same with javascript and after that from code behind.

You must Login to comment.