Javascript e、 clientX-rect.left返回假值//0

我目前正在构建一个按钮，它在渐变中悬停。除了渐变的位置外，一切都正常，应该由

e.clientX-rect.left

返回。将按钮悬停在其左边缘，结果为0%（完美！）。但将其悬停在右边，回报率约为150%

非常感谢你的帮助

让btn=document.getElementById（“btn”）；
btn.onmousemove=函数（e）{
设rect=e.target.getBoundingClientRect（）；
设x=e.clientX-rect.left；
btn.style.setProperty（“--x”，x+“%”）；
};
：根目录{
--x:0%；
}
身体{
字体系列：“开放式Sans”，无衬线；
保证金：0；
}
.包装纸{
位置：绝对位置；
顶部：calc（50%-25px）；
左：计算（50%-75px）；
}
钮扣{
高度：50px；
最小高度：50px；
最小宽度：150px；
边界：无；
位置：相对位置；
背景：线性梯度(
90度，
rgba（7,22,103,1）0%，
rgba（55,83,198,1）100%
);
颜色：白色；
边界半径：10px；
填充：0；
}
按钮：悬停{
背景：无；
光标：指针；
}
按钮：：之后{
内容：“；
位置：绝对位置；
背景：线性梯度(
90度，
rgba（7,22,103,1）0%，
rgba（55,83,198,1）var（--x），
rgba（7,22,103,1）100%
);
身高：100%；
宽度：100%；
边界半径：10px；
排名：0；
左：0；
显示：无；
z指数：-1；
}
按钮：悬停：：之后{
显示：内联；
}
跨度{
利润率：0.30px；
}

点击这里
在检索像素值时，不要在css中使用
%
使用
px


让btn=document.getElementById（“btn”）；
btn.onmousemove=函数（e）{
设rect=e.target.getBoundingClientRect（）；
设x=e.clientX-rect.left；
btn.style.setProperty（“--x”，x+“px”）；
};
：根目录{
--x:0%；
}
身体{
字体系列：“开放式Sans”，无衬线；
保证金：0；
}
.包装纸{
位置：绝对位置；
顶部：calc（50%-25px）；
左：计算（50%-75px）；
}
钮扣{
高度：50px；
最小高度：50px；
最小宽度：150px；
边界：无；
位置：相对位置；
背景：线性梯度(
90度，
rgba（7,22,103,1）0%，
rgba（55,83,198,1）100%
);
颜色：白色；
边界半径：10px；
填充：0；
}
按钮跨距{宽度：100%；}
按钮：悬停{
背景：无；
光标：指针；
}
按钮：：之后{
内容：“；
位置：绝对位置；
背景：线性梯度(
90度，
rgba（7,22,103,1）0%，
rgba（55,83,198,1）var（--x），
rgba（7,22,103,1）100%
);
身高：100%；
宽度：100%；
边界半径：10px；
排名：0；
左：0；
显示：无；
z指数：-1；
}
按钮：悬停：：之后{
显示：内联；
}
跨度{
利润率：0.30px；
}

点击这里
完成悬停-现在还将保存上次跟踪的光标位置


让btn=document.getElementById（“btn”）；
btn.onmousemove=函数（e）{
设rect=e.target.getBoundingClientRect（）；
设x=e.clientX-rect.left；
btn.style.setProperty（“--x”，x+“px”）；
};
：根目录{
--x:0%；
}
身体{
字体系列：“开放式Sans”，无衬线；
保证金：0；
}
.包装纸{
位置：绝对位置；
顶部：calc（50%-25px）；
左：计算（50%-75px）；
}
钮扣{
高度：50px；
最小高度：50px；
最小宽度：150px；
边界：无；
位置：相对位置；
背景：线性梯度(
90度，
rgba（7,22,103,1）0%，
rgba（55,83,198,1）var（--x），
rgba（7,22,103,1）100%
);
颜色：白色；
边界半径：10px；
填充：0；
}

点击这里
非常感谢。这完全有道理。但是现在我在渐变中有一个奇怪的跳跃，在第一个25%和75%之后。这是由内部按钮的跨度标记引起的，我刚刚移除了它，它按照预期工作。谢谢！