Custom cursor not working after transformations. Help :(
-
Hello everyone,
I have a problem with my custom cursor on the web page I am making (new-site.estefaniamunoz.com). The combination of the z-index and the transformation to center the cursor makes the cursor not work properly. If I don't give the cursor a transformation, it works, everything is clickable, despite the z-index, but the cursor is not centered.
If I center the cursor, it works again to click the elements when I remove the z-index.Any idea/solution?
CSS
.pointer {
z-index:9999;
background-color: white;
position: fixed;
width: 48px;
height: 48px;mix-blend-mode: difference;
}
Javascript
// Custom Cursordocument.addEventListener( "DOMContentLoaded", function () {
// Function to check if the lightbox is active
function isLightboxActive() {
var lightboxRegion = document.getElementById("lightbox-region");
return lightboxRegion && lightboxRegion.classList.contains("lay-hide-images");
}// Append the cursor element jQuery("body").append('<div class="pointer"></div>'); // Update the cursor position on mousemove, and handle visibility based on the lightbox state jQuery("body").on("mousemove", function (e) { let cursor = jQuery(".pointer"); let cursorOffsetX = cursor.width() / 2; let cursorOffsetY = cursor.height() / 2; if (!isLightboxActive()) { cursor.css({ display:"none" }); } else { cursor.css({ top: (e.clientY - cursorOffsetY) + "px", left: (e.clientX - cursorOffsetX) + "px", display:"block" }); } }); // Rotate the cursor by 45 degrees on click jQuery("body").on("mouseenter", "a, img, .img, .elements-collection-region", function () { jQuery(".pointer").css({ transform: "rotate(45deg)", transition: "transform 0.3s ease" }); }); // Reset rotation on cursor when leaving the image jQuery("body").on("mouseleave", "a, img, .img, .elements-collection-region", function () { jQuery(".pointer").css({ transform: "rotate(0deg)", transition: "transform 0.3s ease" }); });
});
Thanks!
-
i can see a cursor. its just white
does that mean to you that the cursor is not working?
maybe i don't understand
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it