Raphael JS：mouseover/mouseout - 文本标签问题

Question

我使用Raphael JS创建一个带有区域和文本标签的SVG地图。当您将鼠标移动到该区域上时，我希望该区域突出显示。

我现在有这个工作，但是当我将鼠标移动到标签上（在该区域的中心）时，该区域的鼠标事件被触发，所以该区域再次不被注意。

有没有什么办法可以防止这种情况发生或解决方法？

Answer 1

在文本上创建一个不透明度设置为0的矩形，并在该矩形上附加事件处理程序。您可以使用文本的getBBox()来计算矩形的尺寸。

Answer 2

通过Paper#set创建一个集合是我工作的方法。例如：

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