Internet Explorer & the "mouseout" Event

[Solidwhite]

Your interactive demo uses:

DOMElement.onmouseout = function () {...};

to remove the highlight color from the respective SVG path. In Internet Explorer (tested in 9, 8 & 7) the mouseout event would not fire and the highlight state would remain.

I believe this is due to the use of the .toFront() Raphael method. When I comment-out the line with this code the map functions properly in IE.

st[0].onmouseover = function () {
    st.animate({ fill : st.color }, 500);
    //st.toFront();
    R.safari();
};

st[0].onmouseout = function () {
    st.animate({ fill : "#d3d3d3" }, 500);
    //st.toFront();
    R.safari();
};

It seems like the .toFront() method is creating another version of the element and IE doesn't copy the events or something like that. A possible fix seems like delegating the event handlers however this really seems more like a Raphael issue (just thought I'd let ya' know).

Thanks Rob for your time and effort, it's much appreciated.

[Lambdac0re]

+1