title: mouseenter and mouseleave on safari, edge and IE
body: <p>I wrote a js code to trigger mouseenter and mouseleave on map areas.
  It works fine in Chrome and Firefox, but not in Safari, Edge, nor IE.</p>
  
  <p>I really can't understand why.</p>
  
  <p>Here is my javascript : </p>
  
  <pre><code>var areas = document.getElementsByTagName('area');
  
  // set event listener for all objects
  for (var i = 0; i &lt; areas.length; i++) {
      areas[i].addEventListener('mouseenter', inArea);
      areas[i].addEventListener('mouseleave', outArea);
  }
  
  // On mouse enter
  function inArea() {
      console.log('mouseenter');
  }
  
  // On mouse leave
  function outArea() {
      console.log('mouseleave');
  }
  </code></pre>
  
  <p>You can play with it here : <a href="https://codepen.io/fantomette/pen/pVdLwM" rel="nofollow noreferrer">https://codepen.io/fantomette/pen/pVdLwM</a></p>
  
  <p>What is wrong with this code ? Or maybe you know an other way to do it ?</p>
  
  <p>Thank you.</p>