Question

Been scouring the net for the ‘best’ way to do table row highlighting.

Seems that the two main alternatives are:

1 Pure CSS: tr:hover

2 Css + Jquery:

$("table").delegate('td','mouseover mouseleave', function(e) {
  if (e.type == 'mouseover') {
    $(this).parent().addClass("tr-hover");
  }
  else {
    $(this).parent().removeClass("tr-hover");
  }
});

I have no idea what is considered best practise these days. As far as I can ascertain, its only IE7 that doesn’t work properly with the Pure CSS option.

Or, are there other alternatives that I should consider?

Answer 1

Use the CSS :hover method. It does also work in IE7+, provided that a DOCTYPE is set. This statement is backed-up by this MSDN article.

… improve CSS2.1 compliance. All this work (with the exception of transparent PNGs) has been done under the <!DOCTYPE> switch only, since all changes required behavioral updates to be more in line what the CSS spec specifies.

  . . .
We also extended our existing implementations to comply with W3C specifications:

• Enable :hover on all elements not just on <a>

According to personal tests (and by this source), standards-compliant mode is not activated when:

• No DOCTYPE is set
  or when the DOCTYPE is set, and:
• A versionless HTML is specified.
• A HTML version lower than 4.x is specified (including non-existent lower versions, such as 3.99)
• HTML 4 is specified (instead of 4.x) without URL. http:// is also valid, other protocols are invalid.
• HTML 4.x Transitional or HTML 4.x Frameset without an URL part.

It is activated with all other DOCTYPEs, including XHTML, XML, and unknown ones.

---

Pros for CSS:

• It’s much more efficient than jQuery: no event listeners are involved, the behaviour is defined right after the definition of the CSS rule (jQuery requires the library and a function call).
• It also works when JavaScript is disabled.

Pros for jQuery:

• It also works in IE6-
  (this markup is not that critical, so this would not have a big weight. Who is using IE6 by the way?).