Menu
I am working on making a Navigation Bar, because it is entertaining, but when trying to make a slight fade on hover using animations, for some reason the javascript implemented hoverout is only working once, and then it never does it again until refreshed.
Why is that, and are there any alternatives to doing this in javascript.
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener('click', () => {
})
x.addEventListener('mouseout', () => {
x.style.animation = 'hoverOut 1s forwards'
})
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% { background-color: #333; }
100% { background-color: #111; }
}
@keyframes hoverOut {
0% { background-color: #111; }
100% { background-color: #333; }
}
.active { background-color: #222; }<html>
<body>
<ul id = 'nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
748
asked Sep 15 '25 21:09
You need to remove the animation, then set it back to reset it:
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener('click', () => {
})
x.addEventListener('mouseout', () => {
x.style.animation = "none";
setTimeout(function() {
x.style.animation = 'hoverOut 1s forwards'
}, 0)
})
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% {
background-color: #333;
}
100% {
background-color: #111;
}
}
@keyframes hoverOut {
0% {
background-color: white;
}
100% {
background-color: #333;
}
}
.active {
background-color: #222;
}<html>
<body>
<ul id='nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Although an easier way is just to use CSS transitions, no JavaScript required:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.5s;
}
li a:hover {
background-color: white;
}
@keyframes hoverOut {
0% {
background-color: white;
}
100% {
background-color: #333;
}
}
.active {
background-color: #222;
}<html>
<body>
<ul id='nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Add the animationend event listener to refresh the animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#using_animation_events
let navChildren = [...document.getElementById('nav-container').children]
navChildren.forEach(x => {
x.addEventListener("animationend",()=>x.style.animation = "none");
x.addEventListener('mouseout',()=>x.style.animation = 'hoverOut 1s forwards');
})ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
animation: hoverIn 0.5s forwards;
}
@keyframes hoverIn {
0% { background-color: #333; }
100% { background-color: #111; }
}
@keyframes hoverOut {
0% { background-color: #111; }
100% { background-color: #333; }
}
.active { background-color: #222; }<html>
<body>
<ul id = 'nav-container'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
