Hide the cursor in a webpage using CSS and JavaScript
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: