Raphael JS : mouseover/mouseout - problem with text-labels

Question

I use Raphael JS to create an SVG-map with area's and textlabels. I want the area to highlight when you move the mouse over it.

I have this working now, but when I move the mouse over the label (in the center of the area) the mouseout-event for that area is triggered, so the area is unhighlighted again.

Is there any way to prevent this from happening, or a workaround ?

Answer 1

Create a rect with opacity set to 0 over the text and attach the event handlers on that rect. You can calculate the dimensions of the rect using getBBox() of the text.

Answer 2

Creating a set via Paper#set was the approach that worked for me. e.g.:

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();
});