自定义光标，无法点击DOM元素

Question

I was trying to make a circle that is following mouse, aka custom cursor. In fact it's working as expected. But i have one issue. If there is a for example button, under the circle, and i want to click the button through the circle it doesn't work. *I can click on element and it works fine, only when the circle is not under mouse yet.

Played with z-index and other thing, but there was no proper result, because i want to have that circle visible over hovered element, like it is in the example down below.

 window.CustomCursor = new(function() { const self = this; const css = ` .customCursor { z-index: 999; width: 22px; height: 22px; border: 1.2px solid #2980b9; border-radius: 50%; position: absolute; transition-duration: 200ms; transition-timing-function: ease-out; } `; //Creating Style const style = document.createElement('style'); style.appendChild(document.createTextNode(css)); document.querySelector('head').appendChild(style); //Creating Cursor const cursor = document.createElement('div'); cursor.className = "customCursor"; document.querySelector('body').appendChild(cursor); //Creating Logic document.addEventListener("mousemove", e => { const {pageX, pageY} = e; cursor.setAttribute(`style`, `top: ${pageY - 11}px; left: ${pageX - 11}px;`); }); document.addEventListener("click", e => { //soon }); });

 body { background: #0f1215; }

 <button onclick="alert('Hi')">Button</button>

Answer 1

Add pointer-events: none; to the cursor styles.

const css = `
    .customCursor {
        z-index: 999;
        width: 22px;
        height: 22px;
        border: 1.2px solid #2980b9;
        border-radius: 50%;
        position: absolute;
        transition-duration: 200ms;
        transition-timing-function: ease-out;
        pointer-events: none; /* ADD_ME */
    }
`;