I am trying to create a custom mouse cursor where the body tag gets some classes applied depending upon the status of mouse cursor.
Like:
- cursor-moving: whenever the mouse is moved
- cursor-idle: whenever the mouse is idle
- cursor-hover: whenever the mouse is moved over an
anchoror abuttontag.
But this javascript code is not working when I try to hover over the link elements. I tried to do a console, and it shows cursor-hover is working, but very intermittently and that too for a tiny second.
Hint: I have also written a style which will change the background-color of body when this hover thing works.
const customCursor = document.querySelector(".cursor");
let isCursorMoving = false;
let cursorIdleTimeout;
let isCursorOverLink = false;
function updateCursor(event) {
const x = event.clientX + "px";
const y = event.clientY + "px";
customCursor.style.setProperty("--cursor-left", x);
customCursor.style.setProperty("--cursor-top", y);
if (!isCursorMoving) {
document.body.classList.add("cursor-moving");
document.body.classList.remove("cursor-idle");
clearTimeout(cursorIdleTimeout);
}
cursorIdleTimeout = setTimeout(() => {
isCursorMoving = false;
document.body.classList.remove("cursor-moving");
document.body.classList.add("cursor-idle");
}, 1000);
}
function handleLinkEnter(event) {
if (event.target.tagName === "A" || event.target.tagName === "BUTTON") {
document.body.classList.add("cursor-hover");
}
}
function handleLinkLeave(event) {
if (event.target.tagName === "A" || event.target.tagName === "BUTTON") {
document.body.classList.remove("cursor-hover");
}
}
document.addEventListener("mousemove", updateCursor);
document.addEventListener("mouseenter", handleLinkEnter);
document.addEventListener("mouseleave", handleLinkLeave);* {
box-sizing: border-box;
}
body {
background: #3f3f3f;
}
:root {
--cursor-size: 32px;
--tail-size: 1px;
--tail-gap: 48px;
--tail-color: #111;
--cursor-color: #fff;
}
.cursor {
position: fixed;
left: var(--cursor-left, 0);
top: var(--cursor-top, 0);
width: var(--cursor-width, var(--cursor-size));
height: var(--cursor-height, var(--cursor-size));
z-index: 999999;
}
.cursor::before,
.cursor::after {
content: "";
position: absolute;
left: 0;
top: 0;
background: var(--cursor-color);
transform: translate(-50%, -50%);
}
.cursor::before {
width: 1px;
height: var(--cursor-size);
}
.cursor::after {
width: var(--cursor-size);
height: 1px;
}
.cursor .tail {
position: absolute;
left: 0;
top: 0;
background: var(--tail-color);
opacity: 0.6;
}
.cursor .tail::before {
content: "";
position: absolute;
background: var(--tail-color);
}
.cursor .tail-x {
width: 100vw;
height: var(--tail-size);
left: var(--tail-gap);
}
.cursor .tail-x::before {
left: calc(-100vw - var(--tail-gap) - var(--tail-gap));
right: 0;
width: 100vw;
height: var(--tail-size);
}
.cursor .tail-y {
width: var(--tail-size);
height: 100vh;
top: var(--tail-gap);
}
.cursor .tail-y::before {
top: calc(-100vw - var(--tail-gap) - var(--tail-gap));
bottom: 0;
height: 100vw;
width: var(--tail-size);
}
body {
display: grid;
height: 100vh;
width: 100vw;
place-items: center;
}
body.cursor-hover {
background: yellow;
}
body.cursor-hover a {
color: #000;
}
a {
display: inline-block;
color: #fff;
padding: 4px;
}<div class="cursor">
<span class="tail tail-x"></span>
<span class="tail tail-y"></span>
</div>
<a href="#">Link</a>
