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，它也对我有用。

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

1 个答案: