Friday, October 10, 2025
HomeLanguagesJavascriptHide the cursor in a webpage using CSS and JavaScript

Hide the cursor in a webpage using CSS and JavaScript

Given an HTML document, the task is to hide the cursor from the given element 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. 

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;">
        neveropen
    </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:

Example 2: This example hides the cursor from the <body> of a web page. 

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;">
        neveropen
    </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:

RELATED ARTICLES

Most Popular

Dominic
32350 POSTS0 COMMENTS
Milvus
87 POSTS0 COMMENTS
Nango Kala
6718 POSTS0 COMMENTS
Nicole Veronica
11880 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11941 POSTS0 COMMENTS
Shaida Kate Naidoo
6838 POSTS0 COMMENTS
Ted Musemwa
7101 POSTS0 COMMENTS
Thapelo Manthata
6794 POSTS0 COMMENTS
Umr Jansen
6794 POSTS0 COMMENTS