Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Hide the cursor on a webpage using CSS and JavaScript
In this tutorial, we will learn to hide the cursor on a webpage using CSS and JavaScript. Sometimes, we need to create custom cursor styles or hide the cursor entirely for specific HTML elements to enhance user experience or create interactive interfaces.
There are two main approaches to hide the cursor on a webpage. One uses CSS, and another uses JavaScript. We will explore both methods with practical examples.
Syntax
selector {
cursor: none;
}
Method 1: Using CSS to Hide the Cursor
The CSS cursor property allows us to control the appearance of the cursor. By setting cursor: none, we can completely hide the cursor for any HTML element
Example
In this example, we create a div element and apply the cursor: none style to hide the cursor when hovering over it
<!DOCTYPE html>
<html>
<head>
<style>
.hide-cursor {
cursor: none;
height: 200px;
width: 300px;
background-color: #ff6b6b;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-serif;
margin: 20px 0;
}
</style>
</head>
<body>
<h2>Hiding the cursor using CSS</h2>
<div class="hide-cursor">
Hover here - cursor will disappear
</div>
<p>Move your cursor over the red box above to see the effect.</p>
</body>
</html>
A red box with white text appears. When you hover over the box, the cursor becomes invisible. The cursor reappears when you move it outside the box.
Method 2: Using JavaScript to Hide the Cursor
We can use JavaScript to dynamically change the cursor style by accessing the style.cursor property of any HTML element. This approach provides more control and allows us to hide/show the cursor based on user interactions
Example
In this example, we use JavaScript to hide the cursor when a button is clicked
<!DOCTYPE html>
<html>
<head>
<style>
.interactive-box {
height: 200px;
width: 300px;
background-color: #4ecdc4;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-serif;
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Hiding the cursor using JavaScript</h2>
<div class="interactive-box" id="targetDiv">
Cursor visibility controlled by buttons
</div>
<button onclick="hideCursor()">Hide Cursor</button>
<button onclick="showCursor()">Show Cursor</button>
<script>
function hideCursor() {
const targetDiv = document.getElementById("targetDiv");
targetDiv.style.cursor = "none";
}
function showCursor() {
const targetDiv = document.getElementById("targetDiv");
targetDiv.style.cursor = "default";
}
</script>
</body>
</html>
A teal-colored box appears with two buttons below it. Clicking "Hide Cursor" makes the cursor invisible when hovering over the box. Clicking "Show Cursor" restores the default cursor behavior.
Conclusion
Both CSS and JavaScript methods are effective for hiding the cursor. Use CSS for static cursor hiding and JavaScript when you need dynamic control based on user interactions or specific conditions.
7K+ Views
