Mouseover/hover Effect Slow On IE8

I have noticed a weird performance thing in IE8 when using mouseover events on a table with many rows (100 in this example). I have tried a lot of different approaches but I can't

Solution 1:

The :hover IS very slow on IE8, no matter how you intend to implement it. In fact, the javascript onmouseover, onmouseout events provides way faster methods for creating a hover effect, than CSS does

Fastest example on IE8:

<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
   <td>foo bar</td>
</tr>
</table>

Slower example:

<style type="text/css">
   tr.S1    {background-color:#000000}
   tr.S2    {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
   <td>foo bar</td>
</tr>
</table>

VERY slow example: JSFiddle

<style type="text/css">
   tr.S     {background-color:#000000}
   tr.S:hover   {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
   <td>foo bar</td>
</tr>
</table>

Solution 2:

Btw for all browsers you can use :hover selector using css only. And only for IE6 you can add your fastest soluton.

Solution 3:

Try using event bubbling. Add the hover event to the table only, and then look at the target element.

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});

Solution 4:

Have you tried to see what happens if you only have one per row? Curious if it is the number of elements in the DOM [or in each row] could affect performance. Otherwise, it could be an issue with the way ie8 traverses tags in the selector engine. Not really an answer, but something to try.

No IE8 or I'd try it myself.

Solution 5:

Seems fast enough to me, without actually looking at metrics.

You could try mouseover/mouseout instead of toggling. You could also try event delegation, which often helps with this many elements in the dom.

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });