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 Design an Event Webpage using HTML and CSS Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What Weâre Going to CreateWeâll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev 5 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 Implement Dark Mode in Websites Using HTML CSS & JavaScript Dark and light modes let users switch between a dark background with light text and a light background with dark text, making websites more comfortable and accessible based on their preferences or surroundings.What Weâre Going to CreateA button allows users to switch between dark and light themes dy 5 min read Create a Wikipedia Search using HTML CSS and JavaScript In this article, we're going to create an application, for searching Wikipedia. Using HTML, CSS, and JavaScript, users will be able to search for articles on Wikipedia and view the results in a user interface. When the user inputs the search text into the textbox, the search result for the same will 3 min read How to create a Blur Mask Image Website using HTML CSS and JavaScript ? In this article, we will see how to create a website with a blur mask image using HTML, CSS, and JavaScript. Generally, we often see this kind of effect on many websites. When clicking the button, the box immediately becomes hidden, displaying the blurred content. The website is responsive and works 4 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 Like