In this tutorial, we’ll walk through the process of making the cursor disappear when it hovers over a specific area on a webpage. This can be a neat trick for interactive designs or games. We’ll use simple HTML and CSS to achieve this effect.
Step 1: Set Up Your HTML File
First, create a new HTML file and name it cursor.html. This file will contain the structure of our webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Cursor</title>
<link rel="stylesheet" href="./cursor.css" />
</head>
<body>
<div>
<h1>To see the magic place your Cursor in the box</h1>
<div id="container">
<div id="box"></div>
</div>
<h4>Made with ❤️ by Pratiyush</h4>
</div>
</body>
</html>
In this HTML code:
- We include simple heading and div tag to achieve this simple looking effect.
- We link to an external CSS file named cursor.css which we will create in the next step.
- We have a simple structure with a heading and a container that holds the box where the cursor will disappear.
Step 2: Create Your CSS File
Next, create a CSS file named cursor.css . This file will style our HTML elements and handle the cursor hiding functionality.
#box{
border: 15px solid #000000;
width: 350px;
height: 350px;
border-radius: 99px;
display: flex;
justify-content: center;
align-items: center;
cursor: none;
background-color: rgb(41, 197, 224);
}
#container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1{
margin-top: 100px;
margin-bottom: 50px;
font-size: 40px;
color: aliceblue;
display: flex;
justify-content: center;
align-items: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
background-color: rgb(255, 0, 144);
}
h4 {
font-size: 20px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-bottom: 10px;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 2.5px;
}
In this CSS code:
- We style the #box element with a solid border, specific dimensions, and a border-radius to make it circular. The cursor : none; property hides the cursor when it is over this element.
- We center the #container using flexbox.
- We style the h1 heading to be centered and give it some margins and font properties.
- We set the background color of the body to a vibrant pink.
Step 4: Testing
Open the cursor.html file in your web browser. You should see the heading and the box. When you move your cursor inside the box, it should disappear.
Output
