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

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;
}

JavaScript

const 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

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

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