懸停不正確/跳轉到部分 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>