Fastest tr:hover method

Question

What is the single fastest method for table row hover css change?

I've tried jQuery (onmouseover/out) and CSS with tr:hover, but once I make my page fullscreen (1920x1200) the performance on my grid is getting just sluggish enough to give the entire page a feel of being sub-par. That's on a grid with 25 rows, and some spans and divs per row. I've tried IE and Google Chrome.

Is there another, faster method? What is generally considered the fastest method across browsers for doing hover CSS changes?

Answer 1

Using CSS is the fastest. I've done some testing, and it's about ten times faster than using Javascript.

You might want to try making the grid with simple div elements instead of using a table. In a table the size of all cells depend on other cells, so every change means a lot of recalculating even if the result is the same size as before.