In this article, we are going to learn how to Hide the cursor on a webpage using CSS and JavaScript.
Approach
- First, select the element where the cursor element needs to hide.
- Add CSS style cursor: none to the class.
- Add the class name (class name of CSS style cursor: none) to the particular element where the cursor element is to be hidden.
Example 1: This example hides the cursor from the <div> element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Hide cursor using JavaScript and CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- this is my linkedin profile name --> <h1>CURSOR REMOVER</h1> <h3> Click on Button to Remove Cursor Inside a Div </h3> <div id="main"> this is div</div> <button id="btn" onclick="btnclick();unclick()" > click me</button> <p id="showlater"> </p> <script src="index.js"></script> </body> </html>
now we are gonna add some css for this….
body { text-align: center; font-family: cursive; } #main { background-color: bisque; height: 100px; width: 200px; margin: auto; color: rgb(0, 0, 0) } #btn{ margin-top: 1rem; background-color:#DCA47C; color: white; border-color: #DCA47C; border-radius: 5px; } .newClass { cursor: none; }
now we will add some java script to perform .newclass ( which remove cursor inside a div) after clicking on button….
//first of all we call aor div by id "main". let button = document.getElementById("main"); // now we call our paragraph below button by id "showlater". let paragraph = document.getElementById("showlater"); //now we change our button html after click from click me to unclick so we call button html by first call button by "btn" id. let html =document.getElementById('btn'); // now we call a function which perform when we click button which we already add in our html button tag . function btnclick() { //in this we add newclass in new class we perform our css cursor : none. button.classList.add("newClass"); //add message paragraph after click button paragraph.innerHTML = "cursor has been removed inside a div!!!"; //change button htnl after click html.innerHTML = "unclick"; };