'mouseenter' and 'mouseleave' event keeps triggering with div as cursor

Question

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.

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).
In this example I made a button, and gave it a 'mouseenter' and 'mouseleave' event.
When you enter the button with your cursor, I console.log("enter");
When you leave the button, console.log("leave");

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.
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.

What can you do to fix this so the two events trigger properly?

$(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");
  });
});

* {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
  <a id="startChat" class="btn">Button</a>
</div>

<!--Cursor-->
<div class="cursor"></div>

Answer 1

Add pointer-events: none to your .cursor to make the cursor (black dot) never a target of any mouse events, and so it will never affect the mouse enter and mouse leave events. You can read more about pointer events here

See working example below:

$(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");
  });
});

* {
  cursor: none;
}

.cursor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background-color: black;
  pointer-events: none;
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Button-->
<div class="center marginB">
  <a id="startChat" class="btn">Button</a>
</div>

<!--Cursor-->
<div class="cursor"></div>