鼠标悬停不适用于动画路径

Question

当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);
}   

Answer 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 ，以获得视觉效果。

传递给函数的值中可能存在错误？