Sometimes, we want to hide the cursor on a web page using CSS or JavaScript.
In this article, we’ll look at how to hide the cursor on a web page using CSS or JavaScript.
Hide the Cursor in a Webpage Using CSS
To hide the cursor on a web page with CSS, we can use the cursor property.
For instance, we can write the following HTML:
<div class="nocursor">
Some stuff
</div>
Then we can hide the cursor when our mouse in the div by writing:
.nocursor {
cursor: none;
}
Hide the Cursor in a Webpage Using JavaScript
To hide the cursor on a web page with JavaScript, we can use the style.cursor property.
For instance, we can write the following HTML:
<div class="nocursor">
Some stuff
</div>
Then we can hide the cursor when our mouse in the div by writing:
document.getElementsByClassName('nocursor')[0].style.cursor = 'none';
We get the div with getElementsByClassName .
And we set the style.cursor property of it to 'none' to hide the cursor when our mouse is in the div.
Conclusion
To hide the cursor on a web page with CSS, we can use the cursor property.
To hide the cursor on a web page with JavaScript, we can use the style.cursor property.
