Raphael JS: mouseover / mouseout - problem with text labels

Question

I am using Raphael JS to create an SVG map with an area and text labels. I want the area to stand out when you hover over it.

It works for me now, but when I click the mouse over the label (in the center of the area), the mouseout event for this area is fired, so the area is not lit again.

Is there a way to prevent this or a workaround?

Answer 1

Create a rectangle with an opacity of 0 in the text, and attach event handlers to this rectangle. You can calculate the dimensions of the rectangle using getBBox() text.

Answer 2

Creating a set using Paper # set is the approach that worked for me. eg:.

 var st = paper.set(); st.push.apply(st, vectors); // `vectors`: my array of "hoverable" vectors st.push(text); // `text`: my text vector for `vectors` st.hover(function () { text.show(); }, function () { text.hide(); });