homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

IE7/8 mouseenter/mouseover/mouseout/mouseleave performance

Msg#: 4171633 posted 4:15 pm on Jul 16, 2010 (gmt 0)


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+ Year Member

Msg#: 4171633 posted 5:34 pm on Jul 16, 2010 (gmt 0)

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.


Msg#: 4171633 posted 7:44 pm on Jul 16, 2010 (gmt 0)

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,


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 4171633 posted 7:59 pm on Jul 16, 2010 (gmt 0)

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.


Msg#: 4171633 posted 8:01 pm on Jul 16, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved