Javascript 如何在Discord中制作JoinVideoCallButton这样的按钮？

嗨！ 我只是想知道这里是否有人知道如何制作这种悬停效果，可以用于双选项按钮或导航栏等

我有它的css和html代码，但我不知道如何使效果的工作。另外，我想知道是否可以不使用Jquery

正文{
背景大小：100%；
边际：0px；
背景颜色：灰色；
}
.joinVideoCallButton-2Pohj0{
-ms-flex-align：居中；
-ms-flex-pack:center；
-webkit框对齐：居中；
-webkit盒包：中心；
-webkit框大小：边框框；
对齐项目：居中；
背景色：#43b581；
边界半径：3px；
框大小：边框框；
光标：指针；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
高度：36px；
证明内容：中心；
溢出：隐藏；
填充：0 14px；
位置：相对位置；
}
.joinVideoCallButton-2Pohj0.参考底图-1LCk7B{
-webkit转换：不透明度。1s轻松；
背景色：#69c49a；
边界半径：3px；
底部：0；
左：0；
保证金：2倍；
位置：绝对位置；
排名：0；
过渡：不透明度。1s缓解；
宽度：50%；
flex:1自动；
}
.JOINVIDEO调用按钮-2Pohj0.内部-1e8n63{
光标：指针；
z指数：1；
flex:1自动；
}
.flex-lFgbSz:first child、.horizontal-2BEEBe>.flexChild-1KGW5q:first child{
左边距：0；
}
.flex-lFgbSz、.horizontal-2BEEBe>.flexChild-1KGW5q{
左边距：10px；
右边距：10px；
}
.joinVideoCallButton-2Pohj0.callDivider-\u hMb9n{
背景色：#69c49a；
高度：20px；
边际：0.2px；
不透明度：.6；
宽度：2倍；
}
.joinVideoCallButton-2Pohj0.icon-3tOP24{
高度：16px；
宽度：16px；
}
.joinVideoCallButton-2Pohj0.buttonText-1b8lyZ{
颜色：#F7；
字体大小：14px；
左边距：8px；
右边距：8px；
文本转换：大写；
}
.wrapper-1XTKlU{
背景尺寸：封面；
最小高度：100vh；
溢出：隐藏
}
.flexWrapper-1ztpWj{
高度：100vh
}
.flex-3B1Tl4{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex
}
.alignStart-pnSyE6{
-ms-flex-align：开始；
-webkit框对齐：开始；
对齐项目：flex start
}
.alignEnd-3PVyen{
-ms-flex-align：结束；
-webkit框对齐：结束；
对齐项目：柔性端
}
.alignCenter-3VxkQP{
-ms-flex-align：居中；
-webkit框对齐：居中；
对齐项目：居中
}
.1hwxMa{
-ms-flex-align：拉伸；
-webkit框对齐：拉伸；
对齐项目：拉伸
}
.基线-4enzv{
-ms-flex-align：基线；
-webkit框对齐：基线；
对齐项目：基线
}
.START-2yIZo0的正当性{
-ms-flex-pack：启动；
-webkit盒包：开始；
调整内容：flex start
}
.END-1ceqOU的正当性{
-ms-flex-pack：结束；
-webkit盒式包装：结束；
调整内容：柔性端
}
.justifyCenter-29N31w{
-ms-flex-pack:center；
-webkit盒包：中心；
调整内容：中心
}
.证明在-1d1Hto之间{
-ms-flex-pack:justify；
-webkit盒包：证明；
调整内容：之间的间距
}
.horizontal-2VE-Fw>.spacer-2Aeq3k、.horizontalReverse-k5PqxT>.spacer-2Aeq3k、.vertical-3X17r5>.spacer-2Aeq3k{
最小高度：1px
}
.horizontal-2BEEBe>.flex-lFgbSz、.horizontal-2BEEBe>.flexChild-1KGW5q{
左边距：10px；
右边距：10px
}
.horizontal-2BEEBe>.flex-lFgbSz:第一个孩子，.horizontal-2BEEBe>.flexChild-1KGW5q:第一个孩子{
左边距：0
}
.horizontal-2BEEBe>.flex-lFgbSz:last child，.horizontal-2BEEBe>.flexChild-1KGW5q:last child{
右边距：0
}

视频
嗓音

第1部分 想法相当简单：您需要在按钮行中添加一个额外的“悬停框”元素，对其进行绝对定位，最后根据光标的位置更改对象的左侧值：

函数重定位Overbox（e）{
//获取所有需要的值
//（最好不要使用太多的变量）
让hoverBoxEl=e.target.closest（“.btn行”）.querySelector（“.btn行--悬停框”）；
设hoverBoxHalfWidth=hoverBoxEl.clientWidth/2；
让containerX=e.target.closest（“.btn行”）.getBoundingClientRect（）.left；
设maxLeft=e.target.closest（“.btn行”）.clientWidth-hoverBoxEl.clientWidth；
设newLeftValue=e.pageX-containerX-hoverBoxHalfWidth；
//相应地应用新的左值
如果（newLeftValue>=0）{
如果（newLeftValue>maxLeft）{
hoverBoxEl.style.left=maxLeft+“px”；
}
否则{
hoverBoxEl.style.left=e.pageX-containerX-hoverBoxHalfWidth+“px”；
}
}
否则{
hoverBoxEl.style.left=0+“px”；
}  
}
//一旦鼠标进入，将悬停框设置在正确的位置
const mouseoverHandler=函数（e）{
重新安置过箱（e）；
}
//更新悬停框的位置
const mousemoveHandler=函数（e）{
重新安置过箱（e）；
}
//重置悬停框位置
常量mouseleaveHandler=函数（e）{
e、 target.closest（“.btn行”）.querySelector（“.btn行--悬停框”）.style.left=”“；
}
document.getElementsByCassName（“btn行”）[0]。addEventListener（'mousemove'，mousemoveHandler）；
document.getElementsByCassName（“btn行”）[0]。addEventListener（'mouseenter'，mouseoverHandler）；
document.getElementsByClassName（“btn行”）[0]。addEventListener（'mouseleave'，mouseleaveHandler）
正文{
保证金：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
背景：#202225；
}
.btn行{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：4px；
高度：48px；
背景#43b581；
位置：相对位置；
}
.btn行--悬停框{
宽度：50%；
高度：44px；
边界半径：2px；
位置：绝对位置；
最高：50%；
左：0；
转化：translateY（-50%）；
}
.btn行--悬停框：悬停{
B