Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Hide the cursor on a webpage using CSS and JavaScript
In this tutorial, we will learn to hide the cursor in a webpage using CSS and JavaScript. Sometimes, we need to create our style cursor, and then we need to hide the cursor. Maybe it also needed to hide the cursor for a particular HTML element.
There are two ways to hide the cursor on the Webpage. One uses CSS, and another uses JavaScript. We will learn both approaches one by one in this tutorial.
Use the CSS to hide the cursor on the Webpage
The CSS allows us to change the style of the cursor. We can create different types of the cursor using CSS. If we don’t want to show the cursor, we can apply the style ‘cursor: none’ to the particular HTML element.
Syntax
Users can follow the syntax below to hide the cursor using the CSS.
CSS Selector {
cursor: none;
}
Example
In this example, we have created the div element and given the proper height and width. Also, we have applied a red background color to the div using the CSS. After that, we added the class attribute to the div element and initialized it with the “test” value.
We used the test class name as a CSS selector in the CSS and applied the ‘cursor: none’ style to the div element.
<html>
<head>
<style>
.test {
/* style to hide the cursor */
cursor: none;
height: 300px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<h2>
Hiding the cursor using <i> CSS. </i>
</h2>
<!-- hiding the cursor in this div element -->
<div class="test">Hiding the cursor for this div.</div>
</body>
</html>
In the above output, users can observe that the cursor disappears when the user takes cursor inside the div element.
Use JavaScript to hide the cursor on the Webpage
We can use JavaScript to change the style of any HTML element. Every HTML element contains the style attribute, which we can access by taking the HTML element as a reference. After that, we can access the particular style property of the style attribute and change its value. Here, we will change the value of the cursor property to none using JavaScript.
Syntax
Users can follow the syntax below to hide the cursor on Webpage using JavaScript.
let testDiv = document.getElementById("test");
testDiv.style.cursor = "none";
In the above syntax, style is the attribute of the testDiv element, and the cursor is the property of the style object. We are changing the value of the cursor property to ‘none’.
Example
In the example below, we have accessed the HTML div element via id in the <script> tag. After that, we have to change its style object’s cursor property value to ‘none’ to hide the cursor in that particular div element.
<html>
<head>
<style>
.test {
height: 300px;
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<h2>Hiding the cursor using <i>JavaScript.</i></h2>
<div class="test" id="test">Hiding the cursor for this div.</div>
</br>
<button onClick="HideCursor()">Hide cursor on Div</button>
<script>
// Accessing the HTML element by id
let testDiv = document.getElementById("test");
function HideCursor() {
// hiding the cursor
testDiv.style.cursor = "none";
}
</script>
</body>
</html>
In the above output, when the user clicks on the ‘Hide cursor on Div’ button, it hides the cursor on the div element.
We have learned two approaches to hiding the cursor on a particular HTML element on the Webpage. Users can use either way according to whether they want to change the cursor style from CSS or JavaScript.
4K+ Views
