Description
- Change cursor to black circle
- Hover a link: change cursor to white circle + black border
#1. First, use this code to Code Injection > Footer
If code doesn’t work, you can comment below, message or send me an email.
<div id="custom-cursor"></div>
<script>
function initCursor() {
let cursor = document.getElementById('custom-cursor');
let links = document.getElementsByTagName('a');
document.addEventListener('mousemove', function(e) {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
for(let link of links) {
link.addEventListener('mouseenter', function() {
cursor.classList.add('link-hover');
});
link.addEventListener('mouseleave', function() {
cursor.classList.remove('link-hover');
});
}
}
initCursor();
</script>
#2. Use this code to Custom CSS
* {
cursor: none !important;
}
#custom-cursor {
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: background 0.3s;
}
a:hover ~ #custom-cursor {
background: #fff;
border: 1px solid #000;
width: 10px;
height: 10px;
}
#custom-cursor.link-hover {
background: #fff;
border: 1px solid #000;
width: 10px;
height: 10px;
}
#3. To change size/color of circle cursor. You can adjust these lines.
To make it change to white circle/black border when users hover Burger. You can use this extra code to Custom CSS.
a:hover ~ #custom-cursor,
.burger-inner:hover ~ #custom-cursor {
background: #fff;
border: 1px solid #000;
width: 10px;
height: 10px;
}
and replace
<script></script>
code in above step to this new script code.
