title: Mouseenter/Mouseleave on SVG use and jQuery
body: <p>I'm building my menu's website with SVG picture and I have a probleme with jQuery and the mouseleave event..</p>
  
  <p>This is my HTML / CSS :</p>
  
  <pre><code>&lt;div style="display:none;"&gt;
      &lt;svg id ="home-icon" viewBox="0 0 64 64"&gt;
          &lt;path  d="M57.0 &lt;!-- .. SVG source Here ... --&gt; 98z"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;ul id="top-menu"&gt;
      &lt;li class="menu-icon"&gt;
          &lt;svg&gt;&lt;use xlink:href="#home-icon" /&gt;&lt;/svg&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  .menu-icon svg{
      fill: #AB1;
      width:64px;height:64px; 
  }
  .menu-icon.active svg{
      background: #AB1;
      stroke: #e8e8e8;stroke-width: 2px;
  }
  </code></pre>
  
  <p>And the jQuery :</p>
  
  <pre><code>$('.menu-icon').mouseenter(function(){
      $(this).addClass('active');
  }).mouseleave(function(){
      $(this).removeClass('active');
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/R9aeu/1/" rel="nofollow">-> Code here &lt;-</a></p>
  
  <p>But when the mouse is on the svg balise, I have a trigger 'mouseleave' on my li.menu-icon.. I ready don't understand why ?!</p>
  
  <p>Thank you all for reading and help !</p>