Hide the cursor in a webpage using CSS and JavaScript - GeeksforGeeks

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:
CSS-Misc
JavaScript-Misc
CSS
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
How to position a div at the bottom of its container using CSS?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Hide or show elements in HTML using display property
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?