悬停不正确/跳转到部分 onclick wtihout 锚标签

Question

我正在为我的投资组合网站制作一个跳转标签，但我被这个小功能困住了。

<ul class="section">
   <li><span>home</span></li>
   <li><span>about</span></li>
   <li><span>project</span></li>
   <li><span>contact</span></li>
<ul>

#main .section {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    right: 30px;
    text-align: right;
    z-index: 10;
    margin-top: -100px;
}

#main .section li {
    list-style: none;
    background-color: #fff;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 30px;
    transform: scale(1);
    transition: all ease 0.5s;
}

#main .section li:hover {
    background-color: rgb(78, 78, 78);
    transform: scale(1.5);
}

#main .section li span {
    display: block;
    position: absolute;
    width: 100px;
    height: 20px;
    text-align: right;
    right: 25px;
    color: #fff;
    text-transform: uppercase;
    opacity: 0;
}

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

首先，只有当我将鼠标悬停在span上时才会显示 Text 。 当我将鼠标悬停在一个圆圈的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"});
        })
    }
}

Answer 1

现在悬停圆圈也可以查看文本:)

尝试这个

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

代替

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

然后我在onclick()事件中传递了每个li的类。

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

然后，通过具有目标元素的id的此类名称获取目标元素，

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

Live Demo

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

 .section { display: flex; flex-direction: column; position: fixed; top: calc(25% - 100px); right: 30px; text-align: right; z-index: 10; } .section li { list-style: none; background-color: #fff; position: relative; width: 20px; height: 20px; border-radius: 50%; margin-top: 25px; transform: scale(1); transition: all ease 0.5s; } .section li:hover { background-color: rgb(78, 78, 78); transform: scale(1.5); } .section li span { display: block; position: absolute; width: 100px; height: 20px; text-align: right; right: 25px; color: #fff; text-transform: uppercase; opacity: 0; } .section li:hover span { opacity: 1; } #main{ background:#111; position:relative; height:200px; } .content{ width:100%; margin-bottom:200px; } h1{ color:#00cc00; }

 <div id="main"> <ul class="section"> <li onclick="jump(this.className)" class="home"><span>home</span></li> <li onclick="jump(this.className)" class="about"><span>about</span></li> <li onclick="jump(this.className)" class="project"><span>project</span></li> <li onclick="jump(this.className)" class="contact"><span>contact</span></li> <ul> </div> <div class="content"> <div id="home"> <h1>Home Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="about"> <h1>about Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="project"> <h1>project Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> <div id="contact"> <h1>contact Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p> </div> </div>

Answer 2

试试下面的代码片段，它会对你有帮助。

 function moveToDiv(target){ document.getElementById(target).scrollIntoView({ behavior: 'smooth' }); }

 .section{ display:block; } .section-area{ height: 300px; width: 100%; border: 10px solid red; background: gray; font-size: 30px; box-sizing:border-box; display:block; }

 <ul class="section"> <li onclick="moveToDiv('home')"><span>home</span></li> <li onclick="moveToDiv('about')"><span>about</span></li> <li onclick="moveToDiv('project')"><span>project</span></li> <li onclick="moveToDiv('contact')"><span>contact</span></li> </ul> <div class="section-area" id="home">Home</div> <div class="section-area" id="about">About</div> <div class="section-area" id="projects">Projects</div> <div class="section-area" id="contact">Contact</div>