CSS Hover & onmouseover/out causing 15-20% CPU Usage in Internet Explorer

Question

is there any reason why Internet Explorer (IE7 in my case) gets sluggish and eats up lots of CPU time when using the CSS :hover command or using onmouseover/onmouseout?

I'm really not doing anything complex, nor is my page particularly large.

When I move my mouse anywhere else on the page (where nothing is changing) iexplore.exe stays at 0%, but once I start moving across any element that has onmouseover/onmouseout or a CSS hover class attached to it, things get really slow and sluggish and CPU usage gets high.

The page works perfectly fine in Firefox, Chrome and Safari with not speed issues/sluggishness whatsoever.

Hints/Ideas?

Edit: The onmouseover/onmouseout is on <tr> tags (highlighting a row in a grid); the CSS:hover is used on <a> tags swapping a background-image url.

Answer 1

You need a non-flicker CSS rollover (which doesn't trigger continual 'hover' signals with every tiny mouse movement). Swapping images on hover generally doesn't work too well, especially in IE.

The best way to do this without a Javascript library is to have the desired 'hover' image as a background to the element beneath the one you're hovering over, and the non-hover image as a background to the element in front.

Then for the CSS :hover state of the element in front, set background-image: none; background-color: transparent; so that the desired 'hover' image in the underlying element is revealed.

Check the source code for this example non-flicker CSS rollover.

Depending on your markup, you may need to adjust the z-index value to get the top element 'in front' of the underlying one.