Hide the Cursor in a Webpage using CSS and JavaScript Last Updated : 17 Oct, 2024 Comments Improve Suggest changes Like Article Like Report Hiding the cursor on a webpage means making the mouse pointer invisible while interacting with certain elements. This can be achieved using CSS and JavaScript. In CSS, you can use cursor: none; and in JavaScript, dynamically manipulate the element's style for more control.Hiding the Cursor Using cursor PropertyIn this approach, CSS hides the cursor with the cursor: none;. JavaScript dynamically adds this class to specific elements (like a div or body). When the button is clicked, it triggers cursor invisibility and updates a message.Examples of Hiding the Cursor from WebpageExample 1: Here we hides the cursor over a div element using CSS (cursor: none;). When a button is clicked, JavaScript adds the class to hide the cursor and updates a message. html <!DOCTYPE html> <html lang="en"> <head> <title> Hide the cursor in a webpage using CSS and JavaScript </title> <style> body { text-align: center; } #GFG_DIV { background: green; height: 100px; width: 200px; margin: auto; color: white; } /* CSS style to hide cursor element */ .newClass { cursor: none; } </style> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Click on Button to Hide the Cursor from DIV </h3> <div id="GFG_DIV"></div> <br> <button onClick="GFG_Fun()"> Click Here </button> <p id="GFG"></p> <!-- Script to hide cursor element --> <script> let elm = document.getElementById('GFG'); let div = document.getElementById('GFG_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:hides the cursor over a div elementExample 2: Here we hides the cursor across the entire webpage by adding the cursor: none; class to the body when a button is clicked. A message updates to confirm the action. html <!DOCTYPE html> <html lang="en"> <head> <title> Hide the cursor in a webpage using CSS and JavaScript </title> <style> body { text-align: center; } #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 id="body"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Click on Button to Hide Cursor from Body </h3> <div id="GFG_DIV"></div> <br> <button onClick="GFG_Fun()"> Click Here </button> <p id="GFG"></p> <!-- Script to hide cursor element --> <script> let elm = document.getElementById('GFG'); let body = document.getElementById('body'); /* Function to add class name to hide cursor element */ function GFG_Fun() { body.classList.add("newClass"); elm.innerHTML = "Cursor is removed from body!"; } </script> </body> </html> Output:hides the cursor across the entire webpage Comment More infoAdvertise with us Next Article Hide the Cursor in a Webpage using CSS and JavaScript P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies CSS JavaScript-Questions Similar Reads How to hide the insertion caret in a webpage using CSS ? Insertion caret or text input cursor generally refers to a flashing, thin vertical line. It functions in an input field to indicate where the next character typed will be inserted. If you wish to hide this input cursor from input fields in your webpage, the caret-color property of CSS is used. It ha 1 min read How to Build Animated Cursor Neon using HTML, CSS and JavaScript? The neon cursor moves with your mouse, creating a cool visual effect. You can change the neon color to match your website. You can also adjust how bright and wide the neon glow is to fit your style. You can transform your cursor into a bright neon trail. You can choose different colors, adjust the g 2 min read How to set the cursor to wait in JavaScript ? In JavaScript, we could easily set the cursor to wait. In this article, we will see how we are going to do this. Actually, it's quite an easy task, there is a CSS cursor property and it has some values and one of the values is wait. We will use the [cursor: wait] property of CSS and control its beha 3 min read How to create a Popup Form using HTML CSS and JavaScript ? To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp 3 min read Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript In this article, we are going to create a game in which a mouse comes out from the holes, and we hit the mouse with a hammer to gain points. It is designed using HTML, CSS & Vanilla JavaScript.HTML Code:First, we create an HTML file (index.html).Now, after creating the HTML file, we are going to 5 min read How to Hide the Default Title When Using a Tooltip in JavaScript? The default browser tooltip is shown when a user hovers over an element with a title attribute. To hide this default title, you can use JavaScript to temporarily remove the title attribute while still implementing your custom tooltip.1. Temporarily Remove the Title AttributeThis method removes the t 2 min read How to hide the table header using JavaScript ? In this article, we will see the methods to hide the table header using JavaScript. There are two approaches that can help to hide a table header with the help of JavaScript. They are discussed below: Using style and display propertyUsing jQuery hide Method Approach 1: Select the header using a CSS 2 min read How to Hide an HTML Element by Class using JavaScript? To hide an HTML element by class using JavaScript, the CSS display property can be manipulated.Below are the approaches to hide an HTML element by class:Table of ContentUsing getElementsByClassName() selectorUsing querySelectorAll() selectorApproach 1: Using getElementsByClassName() selectorIn this 3 min read How to hide an element when printing a web page using CSS? Media queries allow you to apply different styles for different media types, such as screens or print. To hide certain elements (like headers or images) when printing a webpage, you can use the @media print query and set the visibility: hidden or display: none to hide those elements during printing. 2 min read How to change cursor to waiting state in JavaScript/jQuery ? Given an HTML document and the task is to get the waiting state cursor when the mouse moves over an element. Here we are going to achieve that by cursor property which allows doing an operation on the cursor. We are going to do that with the help of JavaScript.Approach:Â Â Use the cursor property.Set 3 min read Like