title: Raphael.js mouse over event
body: <p>Hello I have a problem with svg paths. I have a path and inside this path I have another path. Now, when I go over the first path, the second path will be showed. The problem is that, after being over the first path, the second path is showed, but when I go over the second path, this path is hide. This result in a flickering of the second path, because when Im over the second path, the mouse is not over the first, so it hide the second path. After hide it the mouse is over the first path and so it show the second path and so on. So, the second path will blink only when I move the mouse. Here my code:</p>
  
  <p>Here I get all the paths and declare 2 maps (not need for this problem):</p>
  
  <pre><code>//var raphael = requires("../../node_modules/Raphael/raphael.js");
  
  var paper = Raphael('map');
  var map = getPaths(paper, { fill: "#333", stroke: "#000", "stroke-width": 1, "stroke-      linejoin": "round" });
  
  var playerColor = {"player1":"rgb(255,51,51)", "player2":"rgb(51,51,255)", "player3":    "rgb(153,51,255)", "player4":"rgb(51,255,51)", "player5":"rgb(255,255,51)",   "player6":"rgb(255,51,153)"};
  var countryMap = {"0":{units:0, owner:"player1"}, "1":{units:0, owner:"player4"}, "2":   {units:0, owner:"player1"}, "3":{units:0, owner:"player6"}, "4":{units:0, owner:"player5"},   "5":{units:0, owner:"player5"}, "6":{units:0, owner:"player4"}, "7":{units:0,   owner:"player6"}, "8":{units:0, owner:"player6"}, "9":{units:0, owner:"player3"},
  "10":{units:0, owner:"player4"}, "11":{units:0, owner:"player1"}, "12":{units:0, owner:"player5"}, "13":{units:0, owner:"player4"}, "14":{units:0, owner:"player5"}, "15":{units:0, owner:"player3"}, "16":{units:0, owner:"player5"}, "17":{units:0, owner:"player2"}, "18":{units:0, owner:"player6"}, "19":{units:0, owner:"player2"},
  "20":{units:0, owner:"player3"}, "21":{units:0, owner:"player2"}, "22":{units:0, owner:"player1"}, "23":{units:0, owner:"player3"}, "24":{units:0, owner:"player1"}, "25":{units:0, owner:"player4"}, "26":{units:0, owner:"player2"}, "27":{units:0, owner:"player3"}, "28":{units:0, owner:"player2"}, "29":{units:0, owner:"player6"},
  "30":{units:0, owner:"player2"}, "31":{units:0, owner:"player1"}, "32":{units:0, owner:"player4"}, "33":{units:0, owner:"player5"}, "34":{units:0, owner:"player4"}, "35":{units:0, owner:"player1"}, "36":{units:0, owner:"player5"}, "37":{units:0, owner:"player6"}, "38":{units:0, owner:"player6"}, "39":{units:0, owner:"player3"},
  "40":{units:0, owner:"player2"}, "41":{units:0, owner:"player3"}
  };
  </code></pre>
  
  <p>Now I iterate over all the path to modify them and adding mouse events:</p>
  
  <pre><code>for (var countryCode in map) {
  (function (countryPath) {
      countryPath.attr({opacity: 0.6});
      var colour = Raphael.getRGB(playerColor[countryMap[countryPath.id].owner]);
      countryPath.attr('fill', colour);
  </code></pre>
  
  <p>Here I get the box containing the path and put a circle at the center:</p>
  
  <pre><code>    var box = countryPath.getBBox(true);
      var x = box.x+box.width/2;
      var y = box.y+box.height/2;
  </code></pre>
  
  <p>Here I add the big circle and two smaller circles on the left and right of the big one:</p>
  
  <pre><code>    var circle = paper.circle(x,y,8).attr({
          "fill":colour,
          "stroke": "#000",
          "stroke-width": "1"
      });
  
      var circlePlus = paper.circle(x+13,y, 4).attr({
          "fill":colour,
          "stroke": "#000",
          "stroke-width": "1"
      });
      var circleMinus = paper.circle(x-13,y, 4).attr({
          "fill":colour,
          "stroke": "#000",
          "stroke-width": "1"
      });
      var plusButton = paper.text(x+13,y,"+");
      var minusButton = paper.text(x-13,y-0.5,"-");
      var units = paper.text(x,y,countryMap[countryPath.id].units);
  </code></pre>
  
  <p>Here I'm hiding the two little circles and the text inside if no events happen for this path:</p>
  
  <pre><code>    circlePlus.hide();
      circleMinus.hide();
      plusButton.hide();
      minusButton.hide();
  </code></pre>
  
  <p>Now, I'm adding the events to the path and the three circles:</p>
  
  <pre><code>    plusButton.mousedown = function() {
          countryMap[countryPath.id].units += 1;
          units.attr('text', countryMap[countryPath.id].units);
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1"   }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
          paper.safari();
      };
  
      minusButton.mousedown = function() {
          if(countryMap[countryPath.id].units != 0) {
              countryMap[countryPath.id].units -= 1;
          }
          units.attr('text', countryMap[countryPath.id].units);
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
          paper.safari();
      };
  </code></pre>
  
  <p>The problem is here, in fact when the mouse is over the circle plus it is not on the path, so the mouseout event is fired:</p>
  
  <pre><code>    circlePlus.mouseover = function() {
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
          paper.safari();
  
      };
  
      circleMinus.mouseover = function() {
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
          paper.safari();
  
      };
  
      circle.mouseover = function() {
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
          paper.safari();
  
      };
  
  
      countryPath.mouseover(function(event) {
          countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
          circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
          circlePlus.show();
          circleMinus.show();
          plusButton.show();
          minusButton.show();
  
          paper.safari();
      });
  </code></pre>
  
  <p>Here is the mouseout event for the path that will hide the two little circles. As said before the problem is a flickering of the two circles since this code keep fire mouseout and mouseover events.</p>
  
  <pre><code>    countryPath.mouseout(function(event) {
          countryPath.animate({fill: colour, stroke: "#000", opacity: "0.6" }, 300);
          circle.animate({fill: colour, stroke: "#000","stroke-width": 1}, 300);
          circlePlus.hide();
          circleMinus.hide();
          plusButton.hide();
          minusButton.hide();
  
  
          paper.safari();
      });
  
      countryPath.mousedown(function() {
  
      });
      countryPath.transform("s3, 3, 100, 100");
      circle.transform("s3, 3, 100, 100");
      units.transform("s3, 3, 100, 100");
      circlePlus.transform("s3, 3, 100, 100");
      circleMinus.transform("s3, 3, 100, 100");
      plusButton.transform("s3, 3, 100, 100");
      minusButton.transform("s3, 3, 100, 100");
  })(map[countryCode]);
  </code></pre>
  
  <p>The problem is in this lines:</p>
  
  <p>Thank you</p>