CSS overflow and position

Question

I wish that when I'm with the mouse over the link, that blur will disappear and work properly if I don't add the line class. When I add the line class, everything breaks down, the links change position on the x-axis and only the Contact link is visible. How can I add that line for all 3 links without affecting the position and disappearance of the link blur?

And why does that navbar overflow-x occur? its width in css is 100 vw. I think it's from the mouseover event, but how can I prevent that overflow-x? Why does the navbar have that width?

const cursor = document.querySelector('.cursor');



const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav') ;

navLinks.forEach(link =>{
  nav.style.overflow='hidden' ;
  link.addEventListener('mouseover',e=>{ 
    e.target.classList.add('line');
   e.target.classList.remove('blur') ;
  
  })}) ;


  navLinks.forEach(link =>{
    link.addEventListener('mouseleave',e=>{
      
      
     e.target.classList.add('blur') ;
    })}) ;  

nav.addEventListener('mousemove' , function(mouse){
  const x = mouse.pageX +'px';
  const y = mouse.pageY +'px';
  cursor.style.left = x ;
  cursor.style.top = y ; 
  
})  ;

nav { 
  height:10vh;
  width:100vw;
  box-shadow:5px 0px 10px rgba(0,0,0,1);
  display:flex;
  align-items:center;
  background:gray;
  overflow:hidden;
  
  

  cursor:none;
  
  
    
}

.cursor{
  width:3vw;
  height:3vw;
  background:brown;
  border-radius:50%;
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-50%) ;
}
.logo{
  position:relative;
  width:10vw;
  height:100%;
  

}

.logo h2{
  position:absolute;
  top:50%;
  font-size:1rem;
  
  
}
nav ul { 
  display:flex;
  height:100%;
  width:90vw;
  position:relative;

}

nav ul li { 
  list-style:none;
  padding-left:15vw;
  position:relative;
  top:50%;

}

nav ul li a{ 

text-decoration:none;
font-size:1rem;
position:relative;
cursor:none;



}

.blur{
  filter:blur(3px);
}


.section{
  position:relative;
  top:3vh;
  width:100%;
  
  height:100vh;

}

.section1{
  background:red;
}
.section2{
  background:blue;
}
.section3{
  background:purple;
}


.line{
  width:1px;
  height:100%;
  position:absolute;
  background:black;
  animation:anime 1.5s linear infinite;
}
@keyframes anime {
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(100%);
  }
}

<nav>
          
          <div class ="logo">
            <h2 class ='logo'>logo</h2>
          </div> 
          <div class ='cursor'></div>

          <ul>
           
            
          <li><a class="blur  " href ="#">Home</a></a></li>
          
          <li><a class="blur  " href ="#">About</a></a></li>
          
          <li><a class="blur " href ="#">Contact</a></a></li>
          
          

          </ul>
         
        </nav>
            <div class ="section section1" >
            </div>

            <div class ="section section2" >

            </div>

            <div class ="section section3" >
            </div>                                           
             </div>

Christian · Accepted Answer · 2022-02-11 11:22:55Z

I formatted your code a bit. The problem was, that your anchor was just 1px wide, that was too small for the event listeners to react. I changed the line to a pseudo element ::before.

The rest of your code I left untouched.

const cursor = document.querySelector('.cursor');

const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav');

navLinks.forEach(link => {
  nav.style.overflow = 'hidden';
  link.addEventListener('mouseover', e => {
    e.target.classList.remove('blur');
  })
  link.addEventListener('mouseleave', e => {
    e.target.classList.add('blur');
  });
});

nav.addEventListener('mousemove', function(mouse) {
  const x = mouse.pageX + 'px';
  const y = mouse.pageY + 'px';
  cursor.style.left = x;
  cursor.style.top = y;
});

nav {
  height: 10vh;
  width: 100vw;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  background: gray;
  overflow: hidden;
  cursor: none;
}

.cursor {
  width: 3vw;
  height: 3vw;
  background: brown;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.logo {
  position: relative;
  width: 10vw;
  height: 100%;
}

.logo h2 {
  position: absolute;
  top: 50%;
  font-size: 1rem;
}

nav ul {
  display: flex;
  height: 100%;
  width: 90vw;
  position: relative;
}

nav ul li {
  list-style: none;
  padding-left: 15vw;
  position: relative;
  top: 50%;
}

nav ul li a {
  text-decoration: none;
  font-size: 1rem;
  position: relative;
  cursor: none;
  height: 100%;
  display: block;
}

.blur {
  filter: blur(3px);
}

.section {
  position: relative;
  top: 3vh;
  width: 100%;
  height: 100vh;
}

.section1 {
  background: red;
}

.section2 {
  background: blue;
}

.section3 {
  background: purple;
}

nav a::before {
  content: " ";
  width: 1px;
  height: 100%;
  position: absolute;
  background: black;
  animation: anime 1.5s linear infinite;
}

@keyframes anime {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<nav>
  <div class="logo">
    <h2 class="logo">logo</h2>
  </div>
  <div class='cursor'></div>

  <ul>
    <li><a class="blur" href="#">Home</a>
    </li>

    <li><a class="blur" href="#">About</a>
    </li>

    <li><a class="blur" href="#">Contact</a>
    </li>
  </ul>
</nav>
<div class="section section1">
</div>

<div class="section section2">
</div>

<div class="section section3">
</div>

Collectives™ on Stack Overflow

CSS overflow and position

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related