HTML & CSS

Highlight a GridView row on mouse hover with CSS3 (or jQuery)

HTML & CSS · By the Postback Notes editorial team · Published 2026-09-05

Long tables are easier to read when the row under the pointer stands out. Old Web Forms tutorials added onmouseover attributes to every row from RowDataBound, or used jQuery. CSS has done this alone for years, with a smooth transition and without touching the code-behind.

CSS

<asp:GridView ID="gvOrders" runat="server" CssClass="grid" AutoGenerateColumns="true" />
.grid { border-collapse: collapse; width: 100%; }
.grid th, .grid td { padding: .45rem .6rem; border-bottom: 1px solid #d9dee5; text-align: left; }

/* zebra striping on data rows (the header row uses th) */
.grid tr:nth-child(even) td { background: #f6f8fa; }

/* hover and keyboard focus */
.grid td { transition: background-color .15s ease; }
.grid tr:hover td,
.grid tr:focus-within td { background: #fff1c2; }

The rule targets cells (td) rather than the row: background colours on tr are painted under the cells' own backgrounds, so a striped cell would hide a row-level hover colour. :focus-within also highlights the row when a link or button inside it has keyboard focus, so the effect is not reserved for mouse users.

A GridView with a pager renders the pager in its own table row; if your selectors match it, exclude it with a PagerStyle-CssClass and a rule such as .grid tr.pager:hover td { background: none; }.

The jQuery version

You may meet this in older projects. It does the same as the CSS rule, with more code:

$(function () {
  $(".grid").on("mouseenter", "tr:has(td)", function () {
    $(this).addClass("is-hover");
  }).on("mouseleave", "tr:has(td)", function () {
    $(this).removeClass("is-hover");
  });
});

Script is still useful when the hover must do more than change style, such as showing a preview panel for the row. For pure styling, remove it and use CSS.

The RowDataBound attribute approach

// Old pattern, not recommended
e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='#fff1c2';";
e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='';";

It mixes presentation into server code, adds script to every row's HTML, and breaks under a Content Security Policy that forbids inline event handlers. If you maintain such code, replacing it with the CSS above is a safe, purely visual change.

Making whole rows clickable

A highlighted row invites a click. If clicking should open the record, put a real link in the first cell and stretch it with CSS, so keyboard and screen-reader users get the same function:

.grid tr { position: relative; }
.grid td:first-child a::after { content: ""; position: absolute; inset: 0; }

Positioning on table rows is supported in current browsers; test with your target browsers.

Highlighting rows that are ticked rather than hovered: Highlight checked GridView rows. More on transitions: Fade in and out with a CSS3 transition.

Official documentation