Javascript 使用移动div作为CSS剪辑路径

在谷歌和堆栈溢出中，我似乎找不到类似的问题。这是我的情况

我有一个div用于背景图像。我想这个图像被隐藏，除了什么是后面的第二个div移动鼠标

移动的div是一个250px乘250px的圆，如下所示

<div class="page-mouse-tail"></div>
<style>
.page-mouse-tail {
    position: fixed;
    float: left;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}
</style>

---

是否有我可以使背景图像div只能被鼠标尾div的“下方”看到的方法？类似于圆形的剪辑路径，但随鼠标移动。如果可能的话，我只想使用CSS和Javascript。谢谢。

您可以将此添加到第二个div的样式中：

overflow: hidden;

---

是的，对“页面尾部”div应用一个巨大的

框阴影


“严格使用”；
var mouseTails=document.getElementsByClassName（“页面鼠标尾”）；
document.addEventListener（“mousemove”，函数（事件）{
Array.prototype.forEach.call（鼠标细节，函数（尾部）{
tail.style.left=event.pageX+“px”；
tail.style.top=event.pageY+“px”；
});
});
正文{
背景：url(http://wallpaper.ouzs.com/wallpapers/windows_dual_monitor2880x900.jpg);
背景尺寸：封面；
}
.页面鼠标尾{
位置：固定；
浮动：左；
宽度：150px；
/*演示*/
高度：150像素；
边界半径：100%；
边框：1px纯红；
盒影：0 0 0px 9999px白色；
}
感谢您提供这一创造性的解决方案。你知道巨大的盒子阴影可能带来的性能冲击吗？当我尝试这段代码时，如果我把盒子阴影弄得太大，它就不会渲染了，。我想你可以用100vw来代替，这可能会使它更小，所以性能更高，但是有很多屏幕重新绘制，但这可能是CSS解决方案的局限性。
overflow: hidden;