Hover on anchor tag slows down on long pages

Question

I hope this is an easy one, but I've got a page where there's a table with many rows, and the user can decide to view anywhere from fifty per page to the "entire" list which is about 1500 rows. I've noticed that when viewing more rows per page, the "a:hover" style becomes significantly slower. Its not too bad in Firefox/Chrome/Safari but it's very bad in IE7. What's the best way to handle anchor hovering when there are a ton of anchors who use the style?

Here is the CSS I'm currently using for it:

a.brochurelink{
color:#000000;
font-weight:bold;
text-decoration:none;
}

a.brochurelink:visited{
color:#9900BD;
}

a.brochurelink:hover{
text-decoration:underline;
color:#0000FF;
}

Answer 1

My guess is that the problem is not with your CSS, but your 1500 rows! It sounds like you are pushing the limits of the browser. I would stick with pagination, your users will thank you.

Answer 2

IE has always had a very slow DOM implementation. Even IE8 is about 4 or 5 times slower with the DOM than any other current browser. People interested in website performance have proved it over and over again.

The CSS :hover pseudo-selector does require a certain amount of processing by the browser to render it correctly on the correct element. So yeah, IE may be struggling.

If you're doing more than what you've posted above with your hover (say you were actually showing/hiding an element, resizing something) those will trigger page reflows where the ENTIRE DOM has to be recalculated and that'll be REALLY slow.