Highlight GridView Row on Mouse Hover in Asp.Net

In this tutorial, we study how to highlight a gridview row on mouseover.

All we need to do is that on mouseover on gridview rows assign any CSS and on mouseout, remove that CSS. Rather than using mouseover and mouseout method separately, jQuery provides another method named "hover()" which serves purpose of both the methods. Please read more here about hover().

Below jQuery code, will find all the rows of gridview and using hover method it will assign "LightGrey" color on mouseover and then assign "White" color on mouseout.

$(document).ready(function() {
$("#<%=GridView1.ClientID%> tr").hover(function() {
$(this).css("background-color", "Lightgrey");
}, function() {
$(this).css("background-color", "#ffffff");
});
});

If your default background color for row is other than white then put that color code instead of
white.

But there is a problem with this code. Which is, that it will assign the mouseover and mouseout effect on header row as well. Try it yourself with above code. So, how to resolve it? Well, we need to change above code little bit so that it finds only those rows which are having "td", not "th". To do this, we can use "has" selector of jQuery to find out all the rows which have td. Seebel ow jQuery code.

$(document).ready(function() {
$("#<%=GridView1.ClientID%> tr:has(td)").hover(function() {
$(this).css("background-color", "Lightgrey");
}, function() {
$(this).css("background-color", "#ffffff");
});
});

Demo

Download Source Code