Mouseout Event Not Firing In Rafael.js

I have a number of shapes drawn using Raphael.js that I need to add a shadow to and enlarge slightly when the mouse rolls over. I have everything working perfectly in Firefox and C

Solution 1:

the event bubbling mechanism differs on IE, thus generates unstable behavior for mouseover / mouseout events, but their innovation (yes, we're still talking IE!) comes to the rescue.

you can use IE's mouseenter and mouseleave instead of the standard mouseover and mouseout in order to achieve a consistent behavior. you will, of course, have to step down from Raphaël's API and implement these separately: bind another event listener and pass the IE specific event types, as you will have to call legacy code for versions 6-8, use attachEvent on these, or addEventListener for version 9 onward.

you can read more about these IE-specific events on the quirksmode article on the subject.

if you prefer to use jQuery for this, they have already thought of that by providing mouseleave as part of the API.