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

Mouseover doesn't work on an animated path

本文关键字：不起作用 路径 动画 悬停 鼠标      更新时间：2023-09-26

我使用以下代码更改stroke-width时，mouseover的路径，但它不工作…我查了很多关于这个问题的解决方案，他们似乎和我用的是一样的解决方案。我的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);
}

当我为你传递给函数的参数输入虚拟值时，它似乎工作得很好:

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。

也许你传递给函数的值有错误?

相关文章：