Hide the cursor on a webpage using CSS and JavaScript

Javascript CSS Web Development Front End Technology

In this tutorial, we will learn to hide the cursor in a webpage using CSS and JavaScript. Sometimes, we need to create our style cursor, and then we need to hide the cursor. Maybe it also needed to hide the cursor for a particular HTML element.

There are two ways to hide the cursor on the Webpage. One uses CSS, and another uses JavaScript. We will learn both approaches one by one in this tutorial.

Use the CSS to hide the cursor on the Webpage

The CSS allows us to change the style of the cursor. We can create different types of the cursor using CSS. If we don’t want to show the cursor, we can apply the style ‘cursor: none’ to the particular HTML element.

Syntax

Users can follow the syntax below to hide the cursor using the CSS.

CSS Selector {
   cursor: none;
}

Example

In this example, we have created the div element and given the proper height and width. Also, we have applied a red background color to the div using the CSS. After that, we added the class attribute to the div element and initialized it with the “test” value.

We used the test class name as a CSS selector in the CSS and applied the ‘cursor: none’ style to the div element.

<html>
<head>
   <style>
      .test {
         /* style to hide the cursor */
         cursor: none;
         height: 300px;
         width: 300px;
         background-color: red;
      }
   </style>
</head>
<body>
   <h2>
      Hiding the cursor using <i> CSS. </i>
   </h2>
   <!-- hiding the cursor in this div element -->
   <div class="test">Hiding the cursor for this div.</div>
</body>
</html>

In the above output, users can observe that the cursor disappears when the user takes cursor inside the div element.

Use JavaScript to hide the cursor on the Webpage

We can use JavaScript to change the style of any HTML element. Every HTML element contains the style attribute, which we can access by taking the HTML element as a reference. After that, we can access the particular style property of the style attribute and change its value. Here, we will change the value of the cursor property to none using JavaScript.

Syntax

Users can follow the syntax below to hide the cursor on Webpage using JavaScript.

let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";

In the above syntax, style is the attribute of the testDiv element, and the cursor is the property of the style object. We are changing the value of the cursor property to ‘none’.

Example

In the example below, we have accessed the HTML div element via id in the <script> tag. After that, we have to change its style object’s cursor property value to ‘none’ to hide the cursor in that particular div element.

<html>
<head>
   <style>
      .test {
         height: 300px;
         width: 300px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <h2>Hiding the cursor using <i>JavaScript.</i></h2>
   <div class="test" id="test">Hiding the cursor for this div.</div>
   </br>
   <button onClick="HideCursor()">Hide cursor on Div</button> 
   <script>
      
      // Accessing the HTML element by id
      let testDiv = document.getElementById("test");
      function HideCursor() {
         
         // hiding the cursor
         testDiv.style.cursor = "none";
      }
   </script>
</body>
</html>

In the above output, when the user clicks on the ‘Hide cursor on Div’ button, it hides the cursor on the div element.

We have learned two approaches to hiding the cursor on a particular HTML element on the Webpage. Users can use either way according to whether they want to change the cursor style from CSS or JavaScript.