JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<button>Test button</button>

<div class="mouse" id="mouse">
  <img src="https://i.postimg.cc/NFx1b2f7/pack2586.png" alt="">
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

button:hover {
  background-color: darkgreen;
  color: white;
}


* {
  cursor: none;

}

.mouse {
  width: 20px;
  height: 20px;
  background-color: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

.mouse img {
  width: 40px;
}

JavaScript

document.onmousemove = function(e) {
  var mouse = document.getElementById("mouse");
  console.log(mouse.style);
  mouse.style.left = e.pageX + 1 + "px";
  mouse.style.top = e.pageY + 1 + "px";
}