Javascript 悬停不正确/跳转到第1节单击锚定标记

我正在为我的公文包网站制作一个跳转标签，但我被这个小功能卡住了

首先，仅当我将鼠标悬停在

span

上时才会显示文本。当我将鼠标悬停在

li

上时，文本不会显示，这是一个圆圈。我是不是遗漏了什么

第二，我被实际的函数卡住了，它应该跳转到这个部分。我试图使用

scrollIntoView

方法，但如何在一个函数中针对多个元素？ 这是我到目前为止一直在做的，但它肯定不起作用

let jumpbtn = document.querySelectorAll(".section li");

function jump(){
    for(var i = 0; i < jumpbtn.length; i++){
        jumpbtn[i].addEventListener("click", function(){
            this.id.scrollIntoView({behavior: "Smooth"});
        })
    }
}

let jumpbtn=document.queryselectoral（“.section li”）；
函数跳转（）{
对于（变量i=0；i

尝试下面的代码片段，它将对您有所帮助

函数moveToDiv（目标）{
document.getElementById（目标）.scrollIntoView({
行为：“平滑”
});
}

部分{
显示：块；
}
.截面积{
高度：300px；
宽度：100%；
边框：10px纯红；
背景：灰色；
字体大小：30px；
框大小：边框框；
显示：块；
}

主页
关于
项目
联系人

家
关于
项目
联系

现在将圆圈悬停以查看文字：）

试试这个

.section li:hover span {
    opacity: 1;
}

而不是

.section li span:hover {
    opacity: 1;
}

然后 我通过了

onclick（）

事件中每个li的类

<li onclick="jump(this.className)" class="home">

现场演示

函数跳转（TarId）{
var target=document.getElementById（TarId）；
getElementById（TarId）.scrollIntoView（{behavior:“smooth”}）；
}

部分{
显示器：flex；
弯曲方向：立柱；
位置：固定；
顶部：calc（25%-100px）；
右：30px；
文本对齐：右对齐；
z指数：10；
}
.李节{
列表样式：无；
背景色：#fff；
位置：相对位置；
宽度：20px；
高度：20px；
边界半径：50%；
边缘顶部：25px；
变换：比例（1）；
过渡：全部缓解0.5s；
}
.第李节：悬停{
背景色：rgb（78,78,78）；
转换：比例（1.5）；
}
.第二节{
显示：块；
位置：绝对位置；
宽度：100px；
高度：20px；
文本对齐：右对齐；
右：25px；
颜色：#fff；
文本转换：大写；
不透明度：0；
}
.第李节：悬停跨度{
不透明度：1；
}
#主要{
背景：#111；
位置：相对位置；
高度：200px；
}
.内容{
宽度：100%；
边缘底部：200px；
}
h1{
颜色：#00cc00；
}

主页
关于
project
联系人

家庭内容
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢，必须为自己的行为负责。
关于内容
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢，必须为自己的行为负责。
项目内容
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢，必须为自己的行为负责。
联系内容
Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。圣奥卡塔铜塔除外
傲慢，必须为自己的行为负责。

谢谢，我知道那种方法，但我正在寻找另一种不会让#foo继续的方法url@HobbitY解决方案已更新，请检查。非常感谢。

.section li span:hover {
    opacity: 1;
}

<li onclick="jump(this.className)" class="home">

function jump(TarId){
   var target = document.getElementById(TarId);
   document.getElementById(TarId).scrollIntoView({behavior: "smooth"});
}