javascript - 自定义 Cursor，不能点击 DOM 元素

Question

我试图制作一个跟随鼠标的圆圈，也就是自定义光标。事实上，它按预期工作。但我有一个问题。如果有一个例如按钮，在圆圈下面，我想通过圆圈单击按钮，它不起作用。 *我可以点击元素并且它工作正常，只有当圆圈不在鼠标下时。

玩过 z-index 和其他东西，但没有正确的结果，因为我想让那个圆在悬停的元素上可见，就像下面的例子一样。

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

添加 pointer-events: none; 到光标样式。

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 */
    }
`;