title: On hover effect on a SVG group
body: <p>I'm working on a pretty big map with lots of different areas and text on top of them, sort of like countries. I want to add a on mouse hover effect when hovering over this area. The effect should add a shadow and change its opacity. When I hover out of the area the opacity should go back to its original and the shadow effect should go away. I managed to do this but when I add text into this area it messes things up. The on hover effect gets called again when I hover on the text that's inside area when it shouldn't be called again at all. I made a fiddle that works until i hover on the text as well. I'm using the D3.js library for the coding.</p>
  
  <pre><code> var groupAreas = "";
  
   groupAreas = d3.selectAll(".area-group");
  
   groupAreas.on("mouseover", fadeInArea)
     .on("mouseout", fadeOutArea)
     .on("click", zoomIn);
  
   var initialOpacity = 0;
  
   function fadeInArea() {
     //Get its initial opacity
     initialOpacity = d3.select(this).select("path").style("opacity");
  
     d3.select(this).transition(500).attr("filter", "url(#shadow-filter-1)").style("cursor", "pointer");
     d3.select(this).select("path").transition(500).style("opacity", 0.7);
   }
  
   function fadeOutArea() {
     d3.select(this).transition(500).attr("filter", null).style("cursor", "default");
     d3.select(this).select("path").transition(500).style("opacity", initialOpacity);
  
   }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/qx5u9uo4/6/" rel="nofollow">https://jsfiddle.net/qx5u9uo4/6/</a></p>
  
  <p>the area has an original opacity of 0.4. When i hover over the area it changes to 0.7 and the shadow effect is added. When I go out, it goes back to 0.4 as it should. Yet if i go in the area and also hover over the text the OnMouseOver gets called again and it then sets 0.7 as original opacity and thus never goes back to 0.4 again when I actually go outside the area.</p>
  
  <p>I think the problem may lie with my order of DOM svg elements?</p>
  
  <pre><code>  &lt;g class="area-group"&gt;
      &lt;path id="area-1" d="M502.2 581.4h-53.5v-61l167.4 70.4v34.6H502.2z" /&gt;
      &lt;text transform="translate(542.4 614)"&gt; FOO &lt;/text&gt;
      &lt;text transform="translate(459.4 571.2)"&gt; BAR &lt;/text&gt;
      &lt;text transform="translate(521.1 592.9)"&gt; / &lt;/text&gt;
    &lt;/g&gt;
  </code></pre>