IE7/8 mouseenter/mouseover/mouseout/mouseleave performance

[hbmehta]

Hi,

I have a very strange issue and I have done almost everything to make code simple.

The issue is - I have a horizontal menu and onmouseover of it I am changing its background. It works fine if that page doesnt have any row in the table. But if table has 50 or more rows the menu performance changes drastically in IE7/8 (Haven't checked older versions), it works fit and fine in FF and Chrome (No matter how many rows are there in the table).

Code -
onMouseOver="this.style.backgroundColor='#d0d0d0'" onMouseOut="this.style.backgroundColor=''"

even this doesn't work good if table has 50 or more rows.

Any help is greatly appreciated.

Thanks and Regards,
Hardik

[WesleyC]

One thing you could try is to use CSS to do the rollovers instead of Javascript. In an external stylesheet, add something like...

.row {
  background-color: #121212; 
}
.row:hover {
  background-color: #d0d0d0;
}

Then, in your HTML...

<tr class="row">...</tr>

CSS allows you to do rollover cosmetic changes without the need to write any Javascript, which should let you circumvent the whole problem.

[hbmehta]

Thanks for the reply. Until I know :hover selectors only works with a element in IE. I will try what said though.

I feel problem is I am using Dojo 1.4 and that slows down all the js execution on that page. Any dojo experts can help me, because I already tried profiling and layering and etc.

Thanks and Regards,
Hardik

[Fotiman]

I don't know if it will help your particular case, but I recall reading once that it was more efficient to change the class than it was to directly modify the style of an element. So maybe you could try onmousover adding a class (that has style rule defined for background-color: #d0d0d0) and onmouseout removing that class? Just a thought.

[hbmehta]

Thanks fotiman...You are correct indeed. I also read it somewhere but in my case even thats not helping me. As I said I think its dojo framework creating problem. Either I am not using it properly or it already have problem with the performance.