I need assistance with a jump tab feature I am implementing on my portfolio website. I have encountered a couple of issues that I could use some help with.
https://i.sstatic.net/8hwgL.png
<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;
}
I am facing two main challenges. Firstly, the text is supposed to be displayed only when hovering on span, but it is not showing up when hovering on li which is a circular shape. Can you spot any errors in my code?
Secondly, I am struggling with the functionality of jumping to the sections. I have attempted to use the scrollIntoView method, but I am unsure how to target multiple elements within one function. Below is my current attempt, which is not functioning correctly:
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"});
})
}
}