How to Hide Cursor In JavaScript or CSS very Easily

By Saruque Ahamed Mollick

In 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:

  1. How to hide cursor from the whole webpage.
  2. Hide cursor for a particular element.
  3. 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

 

Leave a Reply

Your email address will not be published. Required fields are marked *