In this post, we’ll look at how to hide cursor on a webpage using CSS and JavaScript. So, sometimes we need to hide the cursor for a smoother and enhanced user experience. Whether it’s during presentations, video recordings, or while using full-screen apps like games or multimedia players, the cursor can be distracting and take away from the content.
By hiding it, we also make the interface feel more immersive and streamlined. Using this post, we’ll learn how to hide the cursor using CSS and JavaScript.
Different ways to hide the cursor :
There are two ways to hide the cursor :
- Using CSS.
- Using JavaScript.
We’ll learn both approaches one by one in this post.
Hide cursor using CSS
To hide the cursor using CSS, you can use the cursor property with the value none. Here’s how you can do it:
.hide-cursor {
cursor: none;
}
EXAMPLE
<html>
<head>
<style>
.hide-cursor {
/* Style to hide the cursor */
cursor: none;
height: 250px;
width: 250px;
background-color: green;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<h2>
Hiding the cursor using CSS
</h2>
<!-- Hiding the cursor in this div element -->
<div class="hide-cursor">The cursor is hidden in this area.</div>
</body>
</html>
At the output, the user can see that the cursor will vanish when the user hovers over the div element.
If you want to hide the cursor for the entire webpage, you can apply this style to the body element:
body {
cursor: none;
}
Hide cursor using JavaScript
With JavaScript, you can change the style of any HTML element. Every HTML element has a style attribute. And you can access it by referencing the element. You can then modify specific style properties, such as the cursor property, to change its value. For example, to hide the cursor, you set the cursor property to none using JavaScript.
SYNTAX
You can use this syntax to hide the cursor on a website using JavaScript:
let hideCursorElement = document.querySelector(".hide-cursor-area");
hideCursorElement.style.cursor = "none";
The above code snippet demonstrates how to hide the cursor using JavaScript. First, document.querySelector(".hide-cursor-area") selects the HTML element with the class "hide-cursor-area". Then, hideCursorElement.style.cursor = "none"; hides the cursor when the user hovers over that div element.
EXAMPLE
<html>
<head>
<style>
.cursor-area {
height: 400px;
width: 400px;
background-color: green;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<h2>Hiding the cursor using <i>JavaScript.</i></h2>
<div class="cursor-area" id="cursor-area">Hover the mouse over this area after clicking the button to hide the cursor.</div>
<br>
<button onclick="hideCursor()">Click to hide the cursor</button>
<script>
function hideCursor() {
let cursorAreaDiv = document.getElementById("cursor-area");
cursorAreaDiv.style.cursor = "none";
}
</script>
</body>
</html>
When you click the “Hide cursor on Area” button, the cursor will disappear when you move it over the green box with the text. The green box is centered and has white text, and you can see this change only after clicking the button. Before clicking the button, the cursor will still be visible. After the button is clicked, hovering over the green box will show that the cursor is no longer there.