title: 'mouseenter' and 'mouseleave' event keeps triggering with div as cursor
body: <p>I made a 'custom cursor' by hiding the users cursor and displaying a div where the original cursor would normally be displayed on the screen.  </p>
  
  <p>Now the problem is I'd like to add some animations when hovering over an element (e.g. scale the 'cursor', or in this case the div that acts as the cursor).<br>
  In this example I made a button, and gave it a 'mouseenter' and 'mouseleave' event.<br>
  When you enter the button with your cursor, I console.log("enter");<br>
  When you leave the button, console.log("leave");  </p>
  
  <p>You can quickly see the problem: the two events are being triggered numerous times when hovering over the button, while the cursor is not actually leaving the element.<br>
  Also note that this problem doesn't occur when you're very slowly hovering to the left, or to the top (in a straight line), which is probably because of the 'left: e.pageX and top: e.pageY' piece of code in the script.  </p>
  
  <p>What can you do to fix this so the two events trigger properly?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var cursor = $(".cursor");
  
    /* Cursor */
    $(document).on("mousemove", function(e) {
      cursor.css({
        left: e.pageX,
        /*Or clientX and clientY */
        top: e.pageY,
      });
    });
  
    /* Button */
    $(".btn").on("click", function(e) {
      e.preventDefault();
    });
  
    $(".btn").on("mouseenter", function() {
      console.log("entered");
    });
  
    $(".btn").on("mouseleave", function() {
      console.log("left");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    cursor: none;
  }
  
  .cursor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    background-color: black;
  }
  
  .btn {
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: black;
    background-color: white;
    border: 4px solid black;
    padding: 0.5rem 0.8rem;
    display: inline-block;
    margin: 100px 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--Button--&gt;
  &lt;div class="center marginB"&gt;
    &lt;a id="startChat" class="btn"&gt;Button&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!--Cursor--&gt;
  &lt;div class="cursor"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>