How to Hide Cursor In JavaScript or CSS very Easily
By Saruque Ahamed MollickIn this post, I am going to show you an easy and effective way to hide cursor in JavaScript as well as in CSS.
This lesson will help you to understand the following things:
- How to hide cursor from the whole webpage.
- Hide cursor for a particular element.
- CSS Cursor property to set the cursor to none.
You may also get interested in reading,
CSS cursor Property to change cursor type on mouse hover
Move an Element to Mouse Position in JavaScript
Hide mouse cursor in JavaScript and CSS from the whole web page
If you are willing to hide the mouse cursor from the whole webpage then you just need to use a CSS where you gonna set the cursor property to none.
<style type="text/css">
* {
cursor: none;
}
</style> * {
cursor: none;
}Here * sign represents “ALL”. That means the CSS properties defined in this section will be applicable to all the elements of the document.
Test it on your browser. You can see that the cursor will be hidden on the whole webpage.
Hide Cursor for a particular element or content of a webpage using CSS
<style type="text/css">
#hide_id {
cursor: none;
}
</style>Calculate the distance between mouse and element in jQuery
Example:
<!DOCTYPE html>
<html>
<head>
<title>Hide Cursor in JavaScript</title>
<style type="text/css">
#hide_id {
cursor: none;
}
</style>
</head>
<body>
<div id="hide_id">Hi this is the particular area to hide the cursor</div>
</body>
</html>Hide Cursor in JavaScript for a particular element or content of a webpage
<div id="hide_id">Hi this is the particular area to hide the cursor</div>
<script type="text/javascript">
document.getElementById('hide_id').style.cursor = 'none';
</script>just you need to replace hide_id with your div element which you wanna make hidden.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Hide Cursor in JavaScript</title>
</head>
<body>
<div id="hide_id">Hi this is the particular area to hide the cursor</div>
<script type="text/javascript">
document.getElementById('hide_id').style.cursor = 'none';
</script>
</body>
</html>Special Note: Remember to write your script after the HTML div area or at the end of the body tag. If you are writing your script first and then write your <div id=””> </div> then it will not work.
If you wish you can also use getElementByName instead of getELementById. (if you are using a name instead of ID)
Here is a short and easy video tutorial on how to hide cursor in Javascript and CSS
Also Read,
Create a smooth scroll to top button in jQuery
It Worked!