Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

IE7/8 mouseenter/mouseover/mouseout/mouseleave performance



4:15 pm on Jul 16, 2010 (gmt 0)

5+ Year Member


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,


5:34 pm on Jul 16, 2010 (gmt 0)

5+ Year Member

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.


7:44 pm on Jul 16, 2010 (gmt 0)

5+ Year Member

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,


7:59 pm on Jul 16, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

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.


8:01 pm on Jul 16, 2010 (gmt 0)

5+ Year Member

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month