In this tutorial, we will learn how to hide the cursor on a website or in a particular div element with the help of CSS or JavaScript. In many situations, you may have to come up with these requirements. Sometimes in web development, we need to hide the cursor because it may be a distraction for user experience.
To create immersive designs, interactive games, or some specific tasks we may not require a cursor because it diverts the user’s attention away from the main content. This blog post will explain how CSS or JavaScript helps to hide the cursor from a particular element or the whole website.
Hide the cursor on the website using CSS or JavaScript
We can remove the cursor inside a particular element of the website or from the whole website using two methods:-
- Using CSS (Cascading Style Sheets)
- Using JavaScript
Hide Cursor using CSS
CSS made it easy to hide the cursor from a particular element or the whole website. It introduces an inbuilt property called cursor which when set to none in the CSS of the element, the cursor gets hidden for that particular element. If we put the style as ‘cursor: none’ then we can hide the cursor.
SYNTAX
The syntax given below can be used by the user to hide the cursor.
CSS Selector{
cursor: none;
}
EXAMPLE
In this example, we have created a div element having an id attribute having “box” initialization. We have given it a background color blue. This div with the id box is in another div having a class attribute container. Now we will define the proper height and width of the box div as 500 px respectively. Now using display flex we have aligned the element in the center of the container div using ‘justify-content: center’ and ‘align-items: center’. We have applied the color of the text as white. We have also added the h1 heading to be above the box div and given it CSS of ‘text-align: center’ and ‘margin: 100px;’. Now we use div with id box name as CSS Selector style, apply ‘Cursor: none’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Cursor using CSS</title>
<style>
h1 {
text-align: center;
margin: 100px;
}
#box {
width: 500px;
height: 500px;
background-color: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
/*style which hides the cursor */
cursor: none;
margin: auto;
}
</style>
</head>
<body>
<h1>Hide the Cursor using CSS</h1>
<div class="container">
<div id="box">div in which cursor get hidden</div>
</div>
</body>
</html>
At the output, the user can see the cursor disappear when the user takes it inside the div element.
Hide the cursor using CSS on the whole website
When we want to hide the cursor from the whole website then we can apply the below syntax in the style of the website. The syntax to add is;
*{
cursor: none;
}
The output of this will hide the cursor for the user from the whole website. This happened because the cursor: none property defines the cursor to hide or disappear and this * symbol helps to set that property in the whole website
Hide Cursor using JavaScript
When can use Javascript to hide the cursor in a particular element in the website? Javascript can be used to change the style of the HTML element. To do this we take the particular HTML element as a reference and then change the style property of that element using Javascript. As we see we can change the style property so by taking the particular HTML element we can change the cursor style value to none.
SYNTAX
Here is a syntax of how to change the cursor value to none for users to use in a particular element.
let box = document.getElementById("box")
box.style.cursor = "none";
In the output we can see the cursor when pass through the div element it gets disappear. When we take the element div having id box as a reference and give it to the box variable it sets that div as a reference so that we can work on it. After that, we apply a style in which the cursor is set to none this lets the element change the style of the cursor so that it hides from the user.
Hide cursor in whole website
To hide the cursor using Javascript in the whole website we have to use another method. For that we need to define the whole document as our reference then we can use the innerHTML attribute which when used gets or sets the HTML content inside an element. In this, we set the style of the whole website to have the property ‘cursor: none’ which will hide the cursor from the whole website. After that, we have to append the innerHTML in the document’s head to set the property we want in the style of the document. The syntax to do this is
let hidecursor = document.createElement("style");
hidecursor.innerHTML = `
*{
cursor: none;
}
`;
document.head.appendChild(hidecursor);
In the ouput we will see that the cursor disappear from whole website.
EXAMPLE
Let’s take a fun example to showcase how to hide the cursor using the button for that we will use the inner tag property of onclick and give it some functions. For this first, we will make the same h1 heading and div with the id box in the div with the class container. Now below the div box, we will make three buttons that have class attributes initialized with “click”. All three buttons will have an onclick inline tag with functions defined as the hidden cursor (), hide_cursor_in_div(), and reload() respectively.
These first buttons will hide the cursor from the whole website, the second button will hide the cursor from the div element, and the third button will reload the whole page. Now after giving that appropriate CSS. We will use Javascript to hide the cursor by applying the above syntaxes. Also to reload the page we will use the Javascript property of “location. reload();” which will reload the whole page of the website and remove any properties we have applied using Javascript like hiding the cursor etc. Now the code for this is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Cursor using CSS</title>
<style>
#box {
width: 500px;
height: 500px;
background-color: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
h1 {
text-align: center;
margin: 100px;
}
.btn {
display: flex;
justify-content: space-evenly;
margin: 40px;
}
.click {
padding: 30px;
border-radius: 10px;
}
.click:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Hide the Cursor using CSS</h1>
<div class="container">
<div id="box">div in which cursor get hidden</div>
<div class="btn">
<button class="click" onclick="hiddencursor()">Make cursor disappear in whole website</button>
<button class="click" onclick="hide_cursor_in_div()">Make cursor disappear in box</button>
<button class="click" onclick="reload()">Reload the website</button>
</div>
</div>
<script>
const hide_cursor_in_div = () => {
//hide the cursor in the div element
let box = document.getElementById("box");
box.style.cursor = "none";
}
const hiddencursor = () => {
//hide cursor in whole website
let hidecursor = document.createElement("style");
hidecursor.innerHTML = `
*{
cursor: none;
}
`;
document.head.appendChild(hidecursor);
}
const reload = () => {
//reload the websit
location.reload();
}
</script>
</body>
</html>
In the above output when the user clicks the “Make cursor disappear in a box” button it hides the cursor in the box. When a user clicks on the “Make cursor disappear in whole website” button it will hide the cursor in whole website. After clicking on the button “Reload the website” it will remove any change that occurs due to Javascript.
We have leaned how to hide cursor using CSS and Javascript. Also, learn it using two very good and fun examples. Users can use whichever way they want according to their convenience.