Change Mouse Cursor using CSS and JavaScript

In this tutorial we will see how to Change Mouse Cursor using CSS and JavaScript. The JavaScript and CSS code is given below.

Table of Contents

HTML Code

HTML Code is given below.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Change Mouse Cursor using CSS and JavaScript</title>
</head>
<body>
  <span class="cursor"></span>
</body>
</html>

CSS Code

CSS Code is given below, The mouse cursor is removed using css cursor property.


body{
  cursor: none;
  height: 100vh;
  padding: 0;
  margin: 0;
}
.cursor{
  position: fixed;
  width: 50px;
  height: 50px;
  background-color: red;
}

JavaScript Code

JavaScript Code is given below, In this code we are changing the position of span element with the position of mouse cursor in real time.


<script>
var cursor = document.querySelector(".cursor");
document.addEventListener("mousemove",function(x){
cursor.style.cssText = "left: " + x.clientX + "px; top: " + x.clientY + "px;";
});
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Change Mouse Cursor using CSS and JavaScript.