jQuery-光标周围覆盖背景的闪烁图像

我正在尝试使用jQuery/CSS创建缩放/平移/预览

使用鼠标在缩略图上移动带背景的div时。我得到了这个闪烁的结果

在鼠标所在的位置绘制覆盖会触发mouseleave函数。我怎样才能阻止这种事情发生

const ZOOM_LEVEL=2；
$（文档）.ready（函数（）{
$（“.thumb”）.mouseenter（输入）；
$（“.thumb”）.mouseleave（左）；
$（'.thumb'）.mousemove（缩放）；
});
功能缩放（事件）{
const p=calculateZoomOverlay（{x:event.pageX，y:event.pageY}，$（event.target））；
移动光标至最上方（p.左侧，p.顶部）；
移动预览背景（p.offsetX，p.offsetY）；
}
函数calculateZoomOverlay（鼠标、拇指）{
设t=thumb.position（）；
t、 宽度=拇指宽度（）；
t、 高度=拇指高度（）；
设z={}；//缩放覆盖
z、 宽度=t.宽度/缩放水平；
z、 高度=t.高度/缩放水平；
z、 顶部=鼠标y-z高度/2；
z、 左=鼠标.x-z.width/2；
//从边界反弹
如果（z.topt.top+t.height）z.top=t.top+t.height-z.height；
如果（z.left+z.width>t.left+t.width）z.left=t.left+t.width-z.width；
z、 偏移量x=（z.left-t.left）/z.width*100；
z、 偏移量=（z.top-t.top）/z.height*100；
返回z；
}
功能moveCursorOverlay（左、上）{
$（'.cursor overlay'）.css({
顶:顶,，
左：左
});
}
功能movePreviewBackground（offsetX、offsetY）{
$（'.preview'）.css（'background-position-x'，`${offsetX}%`）
$（'.preview'）.css（'background-position-y'，`${offsetY}%`）
}
函数enter（）{
//设置预览图像
const imageUrl=$（this.attr（'src'）；
const backgroundWidth=$（'.preview'）.width（）*缩放级别；
$（'.preview'）.css({
'背景图像'：`url（${imageUrl}）`，
“背景大小”：“${backgroundWidth}自动`
});
$（'.preview'）.show（）；
$（'.cursor overlay'）.width（$（this.width（）/ZOOM_LEVEL）；
$（'.cursor overlay'）.height（$（this.height（）/ZOOM_LEVEL）；
$（'.cursor overlay'）.show（）；
}
函数休假（）{
$（'.preview'）.hide（）；
$（'.cursor overlay'）.hide（）；
}

.image容器{
填充物：5px；
显示器：flex；
弯曲方向：行；
}
.缩略图容器{
显示器：flex；
弯曲方向：立柱；
}
.拇指{
边缘底部：5px；
宽度：160px；
高度：100px；
}
.拇指：悬停{
-moz盒阴影：0 5px橙色；
-webkit盒阴影：0 5px橙色；
盒影：0 0 5px橙色；
}
.预览{
显示：无；
左边距：15px；
宽度：640px；
高度：400px；
边框：3倍纯色橙色；
}
.光标覆盖{
显示：无；
背景色：rgba（0,150,50,0.5）；
位置：固定；
}

---

因为在鼠标上绘制元素会触发mouseleave函数，所以在css中添加指针事件：无会阻止这种情况的发生

让人抓狂的错误。

transform:scale（）是一种非常简单的方法，只使用CSS，这里有更多的想法：