Raphael JS：鼠标悬停/鼠标移出 - 文本标签问题答案

【问题标题】：Raphael JS : mouseover/mouseout - problem with text-labelsRaphael JS：鼠标悬停/鼠标移出 - 文本标签问题
【发布时间】：2011-09-15 19:28:58
【问题描述】：

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

我现在有这个工作，但是当我将鼠标移到标签上（在该区域的中心）时，该区域的 mouseout 事件被触发，因此该区域再次未突出显示。

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

【问题讨论】：

我将 jQuery 与 mouseenter 和 mouseleave 一起使用，它“对 SVG 来说足够好用”（使用 raphaelElement.node）。它可能适用于 IE/VML，也可能不适用。

标签： label mouseover raphael mouseout

【解决方案1】：

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

【讨论】：

该区域是多边形，所以矩形不够好。但我发现我可能可以为此使用 set。我创建了一组每个区域 + 标签，并将事件处理程序附加到集合，而不是区域

【解决方案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();
});

【讨论】：