Mouse pointer tracking with jQuery-CodePudding

I have made my mouse pointer display a circle which inverts colors when hovering over an object by setting cursor: none and tracking a div with jQuery to the mouse position.

The issue is that now when the mouse is stationary it doesn't register and the :hover pseudo-class is essentially useless. Are there any workarounds?

$(document).ready(function() {
  $(document).on('mousemove', function(e) {
    $('#circularcursor').css({
      left: e.pageX,
      top: e.pageY
    });
  })
});

html {
  cursor: none;
}

#circularcursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
  transition: transform .2s;
}

body {
  min-height: 900px;
  background-color: #222;
}

body #cta {
  display: flex;
  justify-content: center;
}

body #cta #cta_btn {
  text-decoration: none;
  font-size: 28px;
  font-family: 'Roboto Slab', serif;
  border: 1px solid #333;
  padding: 15px 50px;
  text-align: center;
  display: inline-block;
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  transition-duration: 0.2s;
  color: rgb(107, 73, 4);
}

#cta_btn:hover {
  transform: scale(120%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Elsie:wght@900&family=Oswald&family=Roboto Slab&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <!-- This is a div for the mouse pointer -->
  <div id="circularcursor"></div>
  <!-- This is a div for the mouse pointer -->
  
  <div id="cta">
    <a href="http://www.google.com">
      <p id="cta_btn">let's talk</p>
    </a>
  </div>
</body>
</html>

CodePudding user response：

To do what you require you need to amend the #circularcursor element so that it doesn't intercept the mouseover event from firing on the a element underneath it. To do that, set pointer-events: none on it.

jQuery($ => {
  $(document).on('mousemove', function(e) {
    $('#circularcursor').css({
      left: e.pageX,
      top: e.pageY
    });
  })
});

html {
  cursor: none;
}

#circularcursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
  transition: transform .2s;
  pointer-events: none; /* add this rule */ 
}

body {
  min-height: 900px;
  background-color: #222;
}

body #cta {
  display: flex;
  justify-content: center;
}

body #cta #cta_btn {
  text-decoration: none;
  font-size: 28px;
  font-family: 'Roboto Slab', serif;
  border: 1px solid #333;
  padding: 15px 50px;
  text-align: center;
  display: inline-block;
  margin-top: 55px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  transition-duration: 0.2s;
  color: rgb(107, 73, 4);
}

#cta_btn:hover {
  transform: scale(120%);
}

<link href="https://fonts.googleapis.com/css2?family=Elsie:wght@900&family=Oswald&family=Roboto Slab&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="circularcursor"></div>
<div id="cta">
  <a href="http://www.google.com">
    <p id="cta_btn">let's talk</p>
  </a>
</div>