raphael js的不同悬停效果答案

【问题标题】：different hover effect with raphael jsraphael js的不同悬停效果
【发布时间】：2014-04-20 23:03:24
【问题描述】：

我正在使用 raphael 插件 js 构建交互式地图。 http://jsfiddle.net/6CvXF/6

我已经设置了不同的循环来包装一些颜色路径。现在，我怎样才能为这个不同的循环做不同的悬停颜色？

感谢您的建议

两个循环示例：

//Abbigliamento
var rosa = {};
rosa["2"] = map.path("M 361.414,300.778 354.578,307.089 354.433,362.433 367.838,362.433 367.838,373.704     430.308,373.704 430.308,300.778    z");
rosa["4"] = map.path("M 326.896,373.593 326.896,363.609 347.391,363.609 347.391,306.804 341.781,301.02 264.493,301.02     264.493,337.675 269.733,342.916 269.64,373.593    z");
rosa["5"] = map.path("M240.633,300.778c0-0.394-41.99-0.197-63.07-0.074v11.323H160.7l0.036,61.726h75.203l-0.214-29.676    l4.909-5.434C240.633,338.643,240.633,301.303,240.633,300.778z");

for(var civico in rosa) {
    rosa[civico].attr(style);
}

//Cultura
var arancio = {};
arancio["3"] = map.path("M 354.578,307.089 361.181,300.544 373.575,300.544 373.575,309.04            354.578,309.039    z");
arancio["7"] = map.path("M 113.015,300.954 113.015,365.639 129.493,365.639 129.636,373.527 129.493,365.639     134.356,365.541 134.467,353.893 128.441,300.602    z");
arancio["8"] = map.path("M 93.731,300.954 113.015,300.954 113.015,365.765 129.493,365.765 129.493,373.668 93.978,373.668        z");
arancio["9"] = map.rect(445.229, 260.62, 39, 19);
arancio["10"] = map.rect(412.147, 260.62, 39, 19);

for(var civico in arancio) {
   arancio[civico].attr(style);
}

【问题讨论】：

目前还不清楚您遇到了什么问题。只需添加类似 element.hover(function() { this.attr( myStyleObject ) });您可能还想包括悬停部分。 raphaeljs.com/reference.html#Element.hover 你可以有一个不同样式的数组，或者只是在每个 map.path() 元素之后应用它们。
嗨伊恩，是的，我想为每个数组添加不同的颜色，但我仍然找不到有效的解决方案

标签： jquery hover raphael

【解决方案1】：

您可以在数组中设置样式，然后设置悬停样式功能...

var styles = [];
styles[2] = { fill: "red", stroke: "blue" };
styles[3] = { fill: "red", stroke: "blue" };
styles[4] = { fill: "blue", stroke: "red" };
styles[5] = { fill: "yellow", stroke: "green" };
styles[7] = { fill: "yellow", stroke: "green" };

function myStyleFunc( which ) {
    this.attr( styles[ which ] ); 
}

及以后（或更早在您设置路径时在循环之外）

for(var civico in rosa) {
    rosa[civico].attr(style).hover( myStyleFunc.bind(rosa[civico], civico)        );
}

小提琴示例here

【讨论】：

感谢您的努力，但是当我使用带有很多空格的地图（我称之为带有数字的 civico）时，我必须一一设置。如果可能的话，我希望颜色与 var rosa 一起使用，所以我不在乎我要添加多少地方。希望我清楚这一点
不明白你的意思，如果你能澄清一下，我怀疑这是一个语言问题。
是的，我可能无法更好地解释它。顺便说一句，我解决了将 id 应用于每个数组并使用 css 设置样式。还是谢谢