In this article, we’ll guide you through the process of changing the mouse cursor to a green tick mark when you hover over a website. We’ll use CSS and JavaScript to achieve this effect.
Why Custom Cursors?
Custom cursors can enhance the user experience and add a touch of personality to your website. In this example, we’ll create a simple yet effective custom cursor with a green tick mark.
The Code
Here’s the complete code to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AICodes Store</title>
<style>
.cursor {
cursor: none;
}
#tick-mark {
position: absolute;
pointer-events: none;
font-size: 20px;
color: #00FF00;
z-index: 10000;
}
</style>
</head>
<body class="cursor">
<div id="tick-mark">✔</div>
<script>
// Get the tick mark element
const tickMark = document.getElementById('tick-mark');
// Add event listener to move the tick mark with mouse
document.addEventListener('mousemove', (e) => {
tickMark.style.top = `${e.clientY}px`;
tickMark.style.left = `${e.clientX}px`;
});
// Check if the website is aicodes.store
if (window.location.hostname === 'aicodes.store' || window.location.hostname === 'www.aicodes.store') {
// Do nothing, tick mark will be displayed
} else {
// For testing purposes, display the tick mark on any website
// Remove this condition if you want the tick mark only on aicodes.store
}
</script>
</body>
</html>
How it Works
- We add a CSS class
cursorto thebodyelement to hide the default cursor. - We create a
divelement with the idtick-markand add the green tick mark symbol (✔) to it. - We use JavaScript to get the
tick-markelement and add an event listener to move it with the mouse pointer. - We use the
clientXandclientYproperties to get the mouse coordinates and update thetopandleftstyles of thetick-markelement.
Tips and Variations
- You can customize the tick mark symbol, font size, and color to fit your website’s design.
- You can add more complex animations or effects to the custom cursor.
- You can use this technique to create custom cursors for specific elements or sections of your website.
Conclusion
In this article, we’ve successfully created a custom mouse cursor with a green tick mark using CSS and JavaScript. You can use this code as a starting point to create your own custom cursors and enhance the user experience on your website
