Рафаэль JS: наведение мышки / mouseout - проблема с текстовыми метками

Question

Я использую Raphael JS для создания SVG-карты с областями и текстовыми метками. Я хочу, чтобы область выделялась при наведении на нее курсора мыши.

У меня это работает сейчас, но когда я наведу курсор мыши на метку (в центре области), вызывается событие mouseout для этой области, поэтому область снова не выделяется.

Есть ли способ предотвратить это или обходной путь?

Answer 1

Создайте прямоугольник с непрозрачностью, установленной на 0 над текстом, и прикрепите обработчики событий к этому прямоугольнику.Вы можете вычислить размеры прямоугольника, используя getBBox() текста.

Answer 2

Создание набора с помощью Paper # set был подход, который работал для меня. 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();
});