title: lagging mouse bahavior on SVG
body: <p>I'm working on a tooth selection menu for a web-app I'm building. I found an SVG and I'm modifying it.</p>
  
  <p>I tried to simplify the mouse behavior, making only the large areas hoverable ('.parent') and the other stuff {pointer-events:none}. However, there's a major lag. When you move your mouse quickly into one of the teeth, it usually doesn't respond. Only when moving slowly into it.</p>
  
  <p>Do you see that also? What can I do?</p>
  
  <pre><code> $('.parent').mouseover(function(){
    $(this).css('fill', 'red');
  });
  
  $('.parent').mouseleave(function(){
    $(this).css('fill', 'none');
  });
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/Vzyjra" rel="nofollow noreferrer">link to the codepen playground</a></p>