Javascript 跟随鼠标移动时背景放大不正确

我创建了一个按钮，当你将鼠标悬停在上面时，背景图像的div会放大。背景应跟随光标的移动。这意味着当您将鼠标悬停在按钮上时，背景图像将跟随光标

当我将鼠标悬停在按钮的右下部分时，图像将放大到左上角，然后再移动到光标的位置。看看下面的例子，看看我的意思。我想让它直接缩放到光标的位置，有什么想法吗

var imgZoomIn=1.2；//%图像会放大多少
功能按钮最大尺寸（x，e）{
//光标的位置（占容器大小的百分比）
var imgContPosition=x.getBoundingClientRect（）；
var mousePosX=（e.clientX-imgContPosition.left）/x.offsetWidth；
var mousePosY=（e.clientY-imgContPosition.top）/x.offsetHeight；
//查找图像从顶部和左侧移动的距离
var leftImgOverlap=x.offsetWidth*（imgZoomIn-1）*mousePosX；
var topImgOverlap=x.offsetHeight*（imgZoomIn-1）*鼠标点；
//实施变革
x、 firstElementChild.style.left=0-leftImgOverlap+“px”；
x、 firstElementChild.style.top=0-topImgOverlap+“px”；
}
//重置值
功能按钮尺寸（x）{
x、 firstElementChild.style.left=“0”；
x、 firstElementChild.style.top=“0”；
}

/*容器*/
.陈列柜{
溢出：隐藏；
位置：相对位置；
宽度：500px；高度：300px；
}
/*带背景图像的div*/
.展示柜b n_Back{
位置：绝对；顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：黑色无重复中心/盖；
过渡：0.4s；
}
.showCaseBtn：悬停。showCaseBtn\u返回{
高度：120%；宽度：120%；
}

---

问题是由css转换引起的。如果将其删除，则缩放会起作用，但不会发生奇特的缩放

var imgZoomIn=1.2；
功能按钮最大尺寸（x，e）{
var imgContPosition=x.getBoundingClientRect（）；
var mousePosX=（e.clientX-imgContPosition.left）/imgContPosition.width；
var mousePosY=（e.clientY-imgContPosition.top）/imgContPosition.height；
var leftImgOverlap=imgContPosition.width*（imgZoomIn-1）*mousePosX；
var topImgOverlap=imgContPosition.height*（imgZoomIn-1）*鼠标点；
x、 firstElementChild.style.left=-leftImgOverlap+“px”；
x、 firstElementChild.style.top=-topImgOverlap+“px”；
}
功能按钮尺寸（x）{
x、 firstElementChild.style.left=“0”；
x、 firstElementChild.style.top=“0”；
}

.showCaseBtn{
溢出：隐藏；
位置：相对位置；
宽度：500px；高度：300px；
}
.展示柜b n_Back{
位置：绝对；顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：黑色无重复中心/盖；
}
.showCaseBtn：悬停。showCaseBtn\u返回{
高度：120%；宽度：120%；
}

---

问题是由css转换引起的。如果将其删除，则缩放会起作用，但不会发生奇特的缩放

var imgZoomIn=1.2；
功能按钮最大尺寸（x，e）{
var imgContPosition=x.getBoundingClientRect（）；
var mousePosX=（e.clientX-imgContPosition.left）/imgContPosition.width；
var mousePosY=（e.clientY-imgContPosition.top）/imgContPosition.height；
var leftImgOverlap=imgContPosition.width*（imgZoomIn-1）*mousePosX；
var topImgOverlap=imgContPosition.height*（imgZoomIn-1）*鼠标点；
x、 firstElementChild.style.left=-leftImgOverlap+“px”；
x、 firstElementChild.style.top=-topImgOverlap+“px”；
}
功能按钮尺寸（x）{
x、 firstElementChild.style.left=“0”；
x、 firstElementChild.style.top=“0”；
}

.showCaseBtn{
溢出：隐藏；
位置：相对位置；
宽度：500px；高度：300px；
}
.展示柜b n_Back{
位置：绝对；顶部：0；左侧：0；
宽度：100%；高度：100%；
背景：黑色无重复中心/盖；
}
.showCaseBtn：悬停。showCaseBtn\u返回{
高度：120%；宽度：120%；
}

忘记添加注释，会立即做到这一点，是不是更容易让容器具有

溢出：隐藏
和
位置：绝对
的普通图像，您可以通过使用
顶部
和
左侧
来移动，并通过使用
宽度
和
高度
来调整大小？@Flying我会尝试这样做，但我没有我认为将图像集中并包含在containerforgot中添加评论会更麻烦，会立即做到这一点，是不是更容易让容器具有
溢出：隐藏
和
位置：绝对
的普通图像，您可以通过使用
顶部
和
左侧
来移动，并通过使用
宽度
和
高度
来调整大小？@Flying我会尝试这样做，但我没有我想如果把图片放在中间并放在右边会更麻烦，谢谢你的帮助。失望的是，这没有像我希望的那样起作用。好的，谢谢你的帮助。失望的是，这并没有像我希望的那样起作用。