如何使自定义光标显示在图像上？

Question

我正在为自己建立一个投资组合网站，并通过创建一个空的div，将其样式设置为一个小圆圈并使用Javascript使其落后于默认光标，从而在默认光标之后创建了一个自定义光标。所有这些都很好。问题在于，一旦光标移到图像上方，圆圈就会显示在图像下方。的HTML<div class="cursor"></div><img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">的CSS.cursor {  height: 15px;  width: 15px;  border: 1px solid #0b0d0f;  border-radius: 50%;  position: absolute;  transition-duration: 200ms;  transition-timing-function: ease-out;  pointer-events: none;}的JavaScriptconst cursor = document.querySelector('.cursor');document.addEventListener('mousemove', e => {  console.log(e);  cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")})我希望自定义光标可以与默认光标一起悬停在图像上，但是会显示在其下。

Answer 1

z-index在CSS中为悬停元素提供更高的位置，使其出现在其他元素（jsfiddle）的前面。

但是，这可能是特定于浏览器的问题-即使没有设置z-index，它也对我有用。