鼠标悬停在动画路径上不起作用答案

【问题标题】：Mouseover doesn't work on an animated path鼠标悬停在动画路径上不起作用
【发布时间】：2013-04-08 19:08:20
【问题描述】：

当mouseover路径时，我使用以下代码更改stroke-width，但它不起作用......我已经检查了很多关于这个问题的解决方案，他们似乎使用与我相同的解决方案。我的canvas 是Raphael("svgContainer", 100, 100);

 function drawPath(i,floorlevel,pointsNum){


  var x1 = floorlevel[i].x;
  var y1 = floorlevel[i].y;
  var x2 = floorlevel[i+1].x;
  var y2 = floorlevel[i+1].y;
  var p = canvas.path("M"+x1 +" "+ y1);
  p.attr("stroke", get_random_color());
  p.attr("stroke-width",4);
  p.attr("id",floorlevel[i].node+floorlevel[i+1].node);


  p.animate({path:"M"+x1 +" "+ y1+ " L" + x2 +" "+ y2}, 1000);

  var set = canvas.set();

  var hoverIn = function() {
      this.attr({"stroke-width": 10});
  };

  var hoverOut = function() {
      this.attr({"stroke-width": 10});    
  }

  p.hover(hoverIn, hoverOut, p, p);
  set.push(p);
}

【问题讨论】：

请创建一个 jsfiddle.net

标签： javascript path jquery-animate raphael

【解决方案1】：

当我为传递给函数的参数添加虚拟值时，它似乎工作正常：

http://jsfiddle.net/hKCDg/

我注意到hoverIn 和hoverOut 的stroke-width 是相同的，这违背了目的。

  var hoverIn = function() {
      this.attr({"stroke-width": 10});
  };

  var hoverOut = function() {
      this.attr({"stroke-width": 10});    
  };

为了视觉效果，我在演示中将后者更改为5。

你传递给函数的值可能有错误？

【讨论】：