In this tutorial, we will learn how to hide the cursor on a webpage using JavaScript. The cursor property in CSS allows you to control the appearance of the mouse pointer when it hovers over an element. Hiding the cursor can be useful in various scenarios, such as custom-styled video players, immersive full-screen applications….
Hide the cursor using CSS
To hide the cursor, we can set the cursor property to none.
tag-name{
cursor: none;
}
Hide the cursor using JavaScript
Now let’s see how to to easily by JavaScript
-
First select the tag or class or id in which the cursor needed to be hidden,
const hideCursor = document.querySelector(".yellow")
In this case, I have used a class named yellow and used querySelector to get it.
-
Then, change the style cursor to none .
hideCursor.style.cursor = "none"
It is most that none should be within ” “.
Hide the cursor using JavaScript
Let’s the the steps on by one……
- The code contains a h1 tag, 3 div tags with different class names.
- Each classes were styled with there respective color name.
- After styling
- The following is the JavaScript code.
The code tells us that when ever the mouse hover to the yellow box (div) it should be hidden.
This is how we can hide the cursor using JavaScript and CSS.
Thank You.