Elementor Tutorial : Create Unique Cursors with This Simple Trick!

    

<style>
.cursor{
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    position: absolute;
}
.cursor.blend-mode{
     mix-blend-mode: difference;
}
.cursor-hover {
    transform: translate(-50%, -50%) scale(2);
}
body:not(.elementor-editor-active) .cursor-container {
    cursor: none;
}
</style>
<script>

document.addEventListener("DOMContentLoaded", function () {	
	if (typeof elementorFrontend !== "undefined" && elementorFrontend.isEditMode()) {
        return;
    }
		document.querySelectorAll(".cursor-container").forEach(container => {
		const cursor = container.querySelector(".cursor");
		container.addEventListener("mousemove", (e) => {

			const rect = container.getBoundingClientRect();
			const x = e.clientX - rect.left;
			const y = e.clientY - rect.top;

			cursor.style.left = x + "px";
			cursor.style.top = y + "px";

			cursor.style.opacity = 1;
			cursor.style.visibility = "visible";  
		});

		container.addEventListener("mouseleave", () => {
			cursor.style.opacity = 0;
			cursor.style.visibility = "hidden";   
		});
		
		// SCALE ON HOVER 
        container.querySelectorAll(".scale-cursor").forEach(target => {
            target.addEventListener("mouseenter", () => {
                cursor.classList.add("cursor-hover");
            });
            target.addEventListener("mouseleave", () => {
                cursor.classList.remove("cursor-hover");
            });
        });
   });
});
</script>