CSS溢出和位置

Question

我希望当我把鼠标放在链接上时，如果我不添加行类，模糊就会消失并正常工作。当我添加line类时，一切都会崩溃，链接在x轴上的位置会发生变化，只有Contact链接可见。如何在不影响链接模糊的位置和消失的情况下为所有3个链接添加该行？

为什么导航条会飞越x？它在css中的宽度是100vw。我认为这是鼠标悬停事件造成的，但我如何防止鼠标悬停-x？导航栏为什么有这么宽？

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>

Answer 1

我对您的代码进行了一些格式化。问题是，你的主播只有1倍宽，太小了，事件听众无法做出反应。我将该行更改为一个伪元素：：before。

你的其余代码我没有动过。

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>