Question

我正试图在Raphael中悬停一个带有路径和文字的集合。在悬停时，我只需要更改路径的颜色，而不是文本。目前我的代码不知道哪个集正在悬停，只更改数组的最后一个元素。

这可能是一个愚蠢的错误，但我很难过：）

这是我的小提琴：http://jsfiddle.net/Kiaaanabal/znacD/1/

    function hexHoverIn() {
  hex.attr({fill: '#00411a'});
  console.log("Hovering Set" + i);
} //hexHoverIn

function hexHoverOut() {
  hex.attr({gradient: '70-#004838-#028151'});
} //hexHoverOut 

var hexArray = new Array();

for(var i = 0; i < hexData.length; i++) {
  var hex = paper.path(hexData[i].pathData);
  hex.attr({rotation: hexData[i].rotation, gradient: '70-#004838-#028151', stroke: '#CFD4D7', 'stroke-width': 5, cursor: 'pointer' });

  var hexText = paper.text(hexData[i].xPos, hexData[i].yPos, hexData[i].text);
  hexText.attr({fill: '#fff', 'font-size': 10, 'font-family': 'Arial', cursor: 'pointer'});

  hexArray[i] = paper.set();
  hexArray[i].push(hex, hexText).hover(hexHoverIn, hexHoverOut);
}

Answer 1

你没有完成实现，请看我的小提琴http://jsfiddle.net/m4Z2K/哪个显示你想要的正确效果：）

主要是我的更改是：

1.在for循环之前声明一个hashmap，这是为了保存所有路径对象

var hexObjectMap ={}; // maintain a hashmap for all the path object

2.使用（参见documentation获取Element.data（）API详细信息）data（）将id保存在每个对象中

hex.data('key',i); // save a identifier in each object

3.创建十六进制后在地图中保存路径对象

hexObjectMap[i] = hex; // save each path object to map

4.在hexHoverIn（）和hexHoverOut（）中，从对象中获取id（此将是用户当前悬停的路径对象）

var key = this.data('key'); // retrieve the 'key' in this path object

并将 hex 替换为 hexObjectMap [key] ，因为 hex 仅保留对您创建的最后一个路径对象的引用。

hexObjectMap[key].attr({fill:'#00411a'});

如果您有未来的问题，请告诉我，享受吧。

将鼠标悬停在文本上时丢失悬停

1 个答案: