Raphael element selection problem

Hopefully this is a simple question for any Raphael experts!

I've created a route map where users can click on each country to see the details. It works fine except th开发者_高级运维at passing the mouse over the red line triggers the mouseout event. I need the red line to effectively be just an image on the map and not an interactive element. How do I achieve this?

See the map in action: http://www.martyn-roberts.co.uk/cycleafrica/route

Thanks!

You could make an invisible layer over the red line, which triggers the animation on the map.

This answer would have been so elegant a year and a quarter ago... there's a very simple way of accomplishing this, albeit not directly through Raphael, using the SVG's pointer-events property. All you need to do is to style the node associated with your route path with pointer-events: none. In javascript and using jquery, that would be

$(routePath.node).css( 'pointer-events', 'none' );

Or just using javascript directly:

routePath.node.style.pointerEvents = 'none';

That will force all mouse events to "drop" onto the elements behind the route.

Here's a fiddle demonstrating the use of pointer events with circles and paths.