title: Raphael.js two different animations, one hover
body: <p>I'm drawing up an interactive map in RaphaelJS and have it working pretty good, but I'm stuck currently. Each region of the map has a label and on hover, the path needs to fill in and the label needs to change color. </p>
  
  <p>I've got the animation triggering to fill the region, I can also animate the text in the same function, however, when you mouseover the text it treats it as a mouseout on the region. So I need them to be animating together. </p>
  
  <p>I've trying using set's but i'm not exactly sure how it should all work, my attempts so far have been unsuccessful. Here is some code,</p>
  
  <p>My Paths and text are all repeated like this:</p>
  
  <pre><code>var text_1808 = rsr.set();
  text_1808.push(rsr.text(0, 0, '1808'));
  text_1808.attr({
    fill: '#0A4E74',
    "font-family": 'source-sans-pro',
    "font-size": '14.9932',
    'stroke-width': '0',
    'stroke-opacity': '1',
    parent: 'text_1808'
  });
  text_1808.transform("m0.9587 0 0 1 194.3486 207.7305").data('id', 'text_1808');
  
  var path_1808 = rsr.set();
  path_1808.push(rsr.path("M 204.229,244.362 204.229,227.229   182.418,227.229 182.418,170.131 196.231,170.131 196.231,159.05 190.202,159.05 190.202,146.476 223.082,146.476 223.082,153.354   222.255,153.354 222.255,175.604 246.281,175.604 246.281,244.362  z"));
  path_1808.attr({
    fill: '#ffffff',
    stroke: '#0A4E74',
    parent: 'suite_1808',
    "stroke-linecap": 'round',
    "stroke-linejoin": 'round',
    'stroke-width': '1',
    'stroke-opacity': '1'
  }).data('id', 'path_1808');
  </code></pre>
  
  <p>Then I call the animations like so</p>
  
  <pre><code>var suites = [path_q, path_r, path_s, path_t, path_u, path_1808, path_w];
  var labels = [text_1808, text_ac, text_ad, text_ae, text_af, text_ag, text_ah];
  
  for (i = 0; i &lt;= suites.length; i++) {
  el = suites[i];
  
  if(el !== undefined){
  
      el.mouseover(function() {
           this.animate({ cursor: 'pointer', fill: '#0A4E74' }, 200); 
       });
  
      el.mouseout(function() { 
           this.animate({ fill: '#ffffff' }, 200); 
       });
  
      el.click(function() { 
           this.animate({ fill: '#EC008C' }, 200); 
       });
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p>so this code works in that it fill's the region properly, but then triggers the mouse out when you mouse over the text. Any and all suggestions appreciated!</p>