Javascript 拉斐尔图标悬停

我有以下基本代码，下面是JSFIDLE：

这个javascript：

var bubble=“M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z”，
hearter=“M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.977,14”，
文件="6.0 0 0.0 0 0.0 0 0.412-0.412-0.412-0.412-0.412-0.412-0.1940-0.0.083-0.3-0.3-0.3-0.356-0.0-0.0-0.0-0.0-0.0-0.0-0.0.0 0 0.0 0.0 0 0.3-0-0.3-0.356-0-0.0.0.0 0.0.0 0 0 0.0.0 0 0 0 0.0 0.0 0 0 0 0.0 0 0.0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.356-0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.406-0.17-0.605-0.083l-9.66,4.183c-0.298,0.121-0.554,0.268-0.771,0。0.0 0 0.0 0 0.0 0 0.0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1-0.366l9.662-4.184c0.255-0.109,0.422-0.383,0.422-0.692V8.471C26.961,8.227,26.855,7.996,26.679,7.858zM205.5.6.5.5.5.5.6.5.5.5.6.5.6.6.5.6.5.6.7 7 7.7 7 7 7.7 7 7 7.7 7 7.7 7 7.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5.5）6 6.5.5）C C C C C-0 0 0.5.5.5-0 0 0 0 0 0 0.5.5.5.5.5-0 0 0 0 0 0 0 0 0 0 0 0.1.1.1.5-0 0 0 0 0 0 0 0.1.1.1.1.1.1-0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1.0.787-3.804l1.309,0.561V3.256c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.407-0.17-0.606-0.083l-9.66,4.183C5.37.7.7 7.5.7 7 7.7 7 7 7.7 7 7.7 7 7 7.7 7 7 7.7 7 7 7 7.7 7 7 7.7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7.7 7 7 7 7 7 7.7 7 7 7 7 7 7 7.7 7 7 7 7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 0.376,0,0.754-0.045,1.126-0.122V11.544c-0.01-0.7,0.27-1.372,0.762-1.856c0.319-0.315,0.708-0.564，1.19-0.756L20.553,5.058z”；
$（'.chat'）。每个（函数（i）{
chat=Raphael（$（这个）[0]，40，40）
chat.path（bubble.attr）({
“填充”：“333”
})
})
$（'.heart'）。每个（函数（i）{
纸张=拉斐尔（$（本）[0]，40，40）
纸。路径（心脏）。属性({
“填充”：“333”
})
})
$（'.documentation'）。每个（函数（i）{
纸张=拉斐尔（$（本）[0]，40，40）
纸张.path（文档）.attr({
“填充”：“333”
})
})

我试图在每个图标上附加一个悬停动作，这样，如果用户将鼠标悬停在菜单项上，图标就会改变颜色

如果我添加鼠标盖，如：

$（'.chat'）。每个（函数（i）{
chat=Raphael（$（这个）[0]，40,40）；
chat.path（bubble.attr）({
“填充”：“333”
})
chat.mouseover（函数（）{
$（this.attr）({
“填充”：“fff”
});
});
})

我得到一个错误，“uncaughttypeerror:Object”没有方法“mouseover”

正确的方法是什么？代码也可以简化吗？

这里有几个问题：

mouseover

正在添加到Raphael纸（画布）中。应将其添加到形状中

代码混合了Raphael形状引用和jQuery元素引用。

$（this）

在某些情况下应替换为

this

，以引用事件的所有者（Raphael形状）

假设在鼠标移出时使用相反的行为，则应使用Raphael的

悬停

将两个处理程序绑定到形状

让我们通过一个代码片段示例来重述这些内容：

$（'.chat'）。每个（函数（i）{
chat=Raphael（$（这个）[0]，40,40）；
var shape=chat.path（bubble.attr）({
“填充”：“333”
});
shape.hover（函数（）{
这个是.attr({
“填充”：“fff”
});
}，函数（）{
这个是.attr({
“填充”：“333”
});
});
})

---

您可以参考以进一步操作它。

哦，我明白了，谢谢您的解释。为了使所有.chat、.documentation和.heart具有相同的功能，您将如何循环这些元素并附加相同的悬停功能？