Lay Theme Forum

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 Cursor

document.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!