如何使用CSS设置光标阴影样式？

nukf8bse 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(115)

在我的页面上，我可以看到div容器的盒子。我只想在光标后面显示一个阴影。我如何才能做到这一点？
CSS样式：

#shadow {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 100px;
    left: 100px;
    box-shadow: 0 0 2rem var(--beton);
    background-color: var(--beton);
    pointer-events: none;
}

HTML：

<div id="shadow"></div>

JS：

const mouse_shadow = function(event) {
    document.querySelector("#shadow").style.top = event.pageY + `px`;
    document.querySelector("#shadow").style.left = event.pageX + `px`;
}

document.querySelector("body").addEventListener("mousemove", mouse_shadow)

css

来源：https://stackoverflow.com/questions/76491238/how-to-style-the-cursor-shadow-using-css

1条答案

按热度按时间

bwntbbo31#

您需要使用事件触发addEventListener，例如body onload。我不熟悉--beton的颜色，所以我使用了占位符

let shadow = document.querySelector("#shadow");

const mouse_shadow = function(event) {
  shadow.style.top = event.pageY + 'px';
  shadow.style.left = event.pageX + 'px';
}

document.querySelector("body").onload = function() {
  this.addEventListener("mousemove", mouse_shadow)
}

#shadow {
  --beton: #2986cc;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 100px;
  left: 100px;
  box-shadow: 0 0 2rem var(--beton);
  background-color: var(--beton);
  pointer-events: none;
}

<body>
  <div id="shadow"></div>
</body>

赞(0）回复(0）举报 2023-06-25

我来回答

如何使用CSS设置光标阴影样式？

1条答案

相关问题

热门标签

最新问答