I'm currently developing a website and I've created a custom cursor to replace the default one. The custom cursor is detecting mouse movement, but it's not interacting with hyperlinks. Below is the code I'm using.
HTML
<div class='cursor'></div>
<div class='cursor'></div>
<h1>Custom cursor</h1>
<a href="#">A link </a>
CSS
* {
cursor: none;
}
.cursor {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 99999;
}
.cursor:nth-child(1) {
background-color: #3A1C71;
z-index: 999999;
}
.cursor:nth-child(2) {
background-color: #FFAF7B;
}
JS
$(document)
.mousemove(function(e) {
$('.cursor')
.eq(0)
.css({
left: e.pageX,
top: e.pageY
});
setTimeout(function() {
$('.cursor')
.eq(1)
.css({
left: e.pageX,
top: e.pageY
});
}, 100);
})
Check out the Codepen Demo for reference
Your insights and assistance on this issue are highly appreciated
Thank you! :)