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
Video Tutorial
Watch video tutorial on how to Change Mouse Cursor using CSS and JavaScript.