Hide the cursor in a webpage using CSS and JavaScript

Last Updated : 25 Jun, 2019

Given an HTML document and the task is to hide the cursor from the given element using CSS and JavaScript.

Approach:

First, select the element where cursor element need to hide.
Add CSS style cursor:none to the a class.
Add the class name (class name of CSS style cursor:none) to the particular element where cursor element to be hide.

Example 1: This example hides the cursor from the <div> element.

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            Hide the cursor in a element 
            using CSS and JavaScript 
        </title> 
          
        <style> 
            #GFG_DIV { 
                background: green; 
                height: 100px; 
                width: 200px; 
                margin: 0 auto; 
                color: white; 
            } 
              
            /* CSS style to hide cursor element */ 
            .newClass { 
                cursor: none; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center;">  
          
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
          
        <p id = "GFG_UP" style =  
            "font-size: 19px; font-weight: bold;"> 
        </p> 
          
        <div id = "GFG_DIV"> 
            This is Div box. 
        </div> 
        <br> 
          
        <button onClick = "GFG_Fun()"> 
            click here 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color: green; font-size: 24px; font-weight: bold;"> 
        </p> 
          
        <!-- Script to hide cursor element -->
        <script> 
            var up = document.getElementById('GFG_UP'); 
            var down = document.getElementById('GFG_DOWN'); 
            var div = document.getElementById('GFG_DIV'); 
              
            up.innerHTML = "Click on button to hide the cursor from DIV."; 
              
            /* Function to add class name to hide cursor element */ 
            function GFG_Fun() { 
                div.classList.add("newClass"); 
                down.innerHTML = "Cursor is removed from DIV!";  
            } 
        </script>  
    </body>  
</html>                     

Output:

Before clicking on the button:
After clicking on the button:

Example 2: This example hides the cursor from the <body> of a web-page.

<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>  
            Hide the cursor in a element 
            using CSS and JavaScript 
        </title> 
          
        <style> 
            #GFG_DIV { 
                background: green; 
                height: 100px; 
                width: 200px; 
                margin: 0 auto; 
                color: white; 
            } 
              
            /* CSS style to hide cursor element */ 
            .newClass { 
                cursor: none; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center;" id = "body">  
      
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1> 
          
        <p id = "GFG_UP" style = 
            "font-size: 19px; font-weight: bold;"> 
        </p> 
          
        <div id = "GFG_DIV"> 
            This is Div box. 
        </div> 
        <br> 
          
        <button onClick = "GFG_Fun()"> 
            click here 
        </button> 
          
        <p id = "GFG_DOWN" style =  
            "color: green; font-size: 24px; font-weight: bold;"> 
        </p> 
          
        <!-- Script to hide cursor element -->
        <script> 
            var up = document.getElementById('GFG_UP'); 
            var down = document.getElementById('GFG_DOWN'); 
            var body = document.getElementById('body'); 
              
            up.innerHTML = "Click on button to hide the cursor from DIV."; 
              
            /* Function to add class name to hide cursor element */ 
            function GFG_Fun() { 
                body.classList.add("newClass"); 
                down.innerHTML = "Cursor is removed from body!";  
            } 
        </script>  
    </body>  
</html>                                 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles