Hover Function Not Working On Rapael.js Objects From an Array

Hover Function Not Working On Rapael.js Objects From an Array

Using Raphael.js 2.1.0 I am trying to create circle objects on the Canvas from an array of coordinates by using this code:

  1. var map = Raphael('canvas', 500, 500);
  2. var coords = [ [150,50], [20,85], [350,95] ];
  3. var circle;
  4. for(var i = 0; i < coords.length; i++){
  5.   circle = map.circle(coords[i][0], coords[i][1], 20);
  6.   circle.toFront();
  7.   circle.attr({
  8.       fill: '#98ED00',
  9.       translation: "4,4",
  10.       stroke: '#FFF',
  11.       'stroke-width': 4,
  12.       opacity: 1,
  13.   });
  14. }

  15.   circle.hover(
  16.   function () {
  17.       circle.animate({
  18.           fill: 'red',
  19.           opacity: 1,
  20.           map: 30,
  21.               'stroke-width': 4
  22.       }, 300);
  23.   }, function () {
  24.       circle.animate({
  25.            fill: '#98ED00',
  26.           opacity: 1,
  27.               'stroke-width': 4,
  28.           map: 20
  29.       }, 300);

  30.   });
but the hover function ONLY functioning on the LAST created object! Can you please let me know how I can fix this issue?

Thanks