Question

我正在尝试制作一个跟随鼠标（又称为自定义光标）的圆圈。实际上，它按预期工作。但是我有一个问题。如果在圆圈下方有一个例如按钮，而我想在圆圈中单击该按钮则不起作用。 *我可以单击element，并且只有当圆不在鼠标下方时，它才能正常工作。

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

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

1 个答案: