How to Hide the Cursor on a Webpage Using CSS and JavaScript

Question

Apu January 19, 2024 › #css › #HowTo

❌

How to Hide the Cursor on a Webpage Using CSS and JavaScript

In this article, we'll explore how to hide the cursor on a webpage using CSS and JavaScript. Sometimes, you may want to create a seamless user experience or hide the cursor for specific elements.

Method 1: Using CSS cursor Property #

In this method, we'll change the cursor style to make it invisible. Here's the CSS code to hide the cursor.

<style>
 body {
  cursor: none;
 }
</style>

Explanation of the above example:

We target the body element.
We use the cursor property with the value none to hide the cursor.

Method 2: Using JavaScript to Control Cursor Visibility #

With JavaScript, we can dynamically control when the cursor is hidden or shown. Here's a JavaScript code example to hide and show the cursor on a button click.

<html>
<body>
 <button id="toggleButton">Toggle Cursor</button>
 <script>
  const button = document.getElementById('toggleButton');
  let cursorVisible = true;

  button.addEventListener('click', () => {
    if (cursorVisible) {
       document.body.style.cursor = 'none';
    } else {
       document.body.style.cursor = 'auto';
    }
    cursorVisible = !cursorVisible;
   });
 </script>
</body>
</html>

Explanation of the above example:

We select the button element with the ID toggleButton.
We track the cursor's visibility state using the cursorVisible variable.
When the button is clicked, we toggle the cursor visibility between none and auto.

Conclusion: #

In this article, we explored two methods to hide the cursor on a webpage using CSS and JavaScript.

You can use the CSS cursor property to make the cursor completely invisible. Alternatively, with JavaScript, you can control when the cursor is hidden or shown.

Write Your Answer

Apu · Accepted Answer · 2024-01-19T17:20:57+05:30

In this article, we'll explore how to hide the cursor on a webpage using CSS and Java…