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

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

z-index在CSS中为悬停元素提供更高的位置，使其出现在其他元素（jsfiddle）的前面。但是，这可能是特定于浏览器的问题-即使没有设置z-index，它也对我有用。