Custom Cursor

Wix offers the ability to change the cursor for a site - but it disappears and turns back into a default cursor when hovering any buttons or links.

I have created a couple Custom Code snippet to them get the desired effect:

• Custom Cursor - CSS (head)
• Custom Cursor - JS (body - end)

Default cursor

Hover cursor

#Code Backup Copies

Custom Cursor - CSS

<style>
        body {
            cursor: none;
            min-height: 100%;
        }
        
        #defaultAtaCursor {
            position: fixed;
            width: 36px;
            height: 36px;
            background-image: url("https://static.wixstatic.com/shapes/d2a457_a32bf97af0b54a409c8163d952235248.svg");
            background-size:contain;
            background-repeat:no-repeat;
            top: var(--y, 0);
            left: var(--x, 0);
            transform: translate(-50%, -50%);
            user-select: none;
            pointer-events: none;
            z-index: 999999!important;
        }
        #defaultAtaCursor.hover {
            background-image: url("https://static.wixstatic.com/shapes/d2a457_8bb339380de4405d89e920c46c3c03a8.svg");
        }

        a, button, img {
            cursor: none !important;
        }
    </style>

Custom Cursor - JS

<script>
document.addEventListener('mouseover', (e) => {
    if (e.target.closest('a,button,img') !== null) {
        document.getElementById("defaultAtaCursor").classList.add("hover");
        console.log(e.target)
    } else {
        if (document.getElementById("defaultAtaCursor").classList.contains("hover")) {
            document.getElementById("defaultAtaCursor").classList.remove("hover");
        }
    }
})

function createCustomCursor() {
    const cursor = document.createElement("div");
    cursor.setAttribute("id", "defaultAtaCursor");
    document.body.appendChild(cursor);

    initCustomCursor(cursor)
}

function initCustomCursor(cursor) {
    document.body.onmousemove = function (e) {
        cursor.style.setProperty('--x', (e.clientX) + 'px');
        cursor.style.setProperty('--y', (e.clientY) + 'px');
    }
}

if (window.innerWidth > 1024) {
    createCustomCursor();
} else {
    console.log('Screen size is smaller then 1024px width')
}
</script>