Javascript 更改悬停时的导航位置

如何使这种导航效果。 演示链接：

https://hookandbarrelrestaurant.com/

---

我的代码链接：

https://codepen.io/Dhaval182/pen/rQPMoW

我能够通过使用CSS变量和Javascript中的一个事件侦听器来实现这一点

它并不是超级复杂，但是，它确实需要一些修补来让它正常工作

示例：

为了检测鼠标位置并使内容像那样移动，需要侦听Javascript中的

mousemove

事件。但是，您可以将该值转换为CSS（），并使用纯CSS完成其余操作

对于CSS，我们使用

display:inline block

属性以及

空白：nowrap

属性来创建列

我们将

溢出

设置为

隐藏

，并将

宽度

和

高度

设置为100%

我在HTML中唯一改变的是

info

元素。我把它改成了div，只是为了让它看起来更漂亮（这不是必要的，可以改成任何东西）

const navbar=document.getElementById（'navbar-list'）；
document.addEventListener（'mousemove'，evt=>{
设x=evt.clientX；
navbar.style.setProperty（'-pos-x'，（-x/1.35））；
});
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
.柔性容器，
菜单
ul，
锂，
a{
身高：100%；
}
.柔性容器，
.菜单{
宽度：100%；
身高：100%；
}
.菜单{
溢出：隐藏；
位置：相对位置；
}
.菜单ul{
位置：绝对位置；
/*使用calc（）方法将“px”添加到从Javascript传输的数字中*/
左：计算值（var（--pos-x）*1px）；
列表样式：无；
边际：0px；
填充：0px；
空白：nowrap；
宽度：100%；
}
.菜单ul>li{
填充：0px；
边际：0px；
左边距：-4px；
文本对齐：居中；
显示：内联块；
宽度：25%；
}
.菜单ul>li>a{
显示：内联块；
边际：0px；
宽度：100%；
文字装饰：无；
颜色：#000；
字号：18pt；
背景：rgba（0,0,0,0.0）；
-webkit过渡：背景色0.3s；
/*狩猎*/
过渡：背景色0.3s；
}
.菜单ul>li>a>.info{
位置：绝对位置；
底部：-30px；
显示：块；
宽度：25%；
-webkit转换：底部0.3s；
/*狩猎*/
过渡：底部0.3s；
}
.菜单ul>li>a:悬停信息{
底部：20px；
}
.菜单ul>li>a:悬停{
背景：rgba（0,0,0,0.6）；
颜色：#FFF；
}

















document.queryselectoral（'a[href^=“#“]）.forEach（anchor=>{anchor.addEventListener（'click'，函数（e）{e.preventDefault（）；document.querySelector（this.getAttribute（'href'））.scrollIntoView（{behavior:'smooth'}）；}）；这里最重要的答案是：谢谢你的帮助。一个问题你能添加4个菜单项并检查一下吗