Consegui resolver através do JQuery, porém queria uma solução apenas em JavaScript puro.
Tenho uma nav
com 4 links no header
, a li
em que o usurário se encontra possui uma classe selected
por padrão, que muda a cor e cria um pequeno traço embaixo.
Meu objetivo é: ao acontecer um hover
em qualquer uma das li
's, essa classe selected
saia da li
principal e vá para onde o mouse estiver.
var navegacaoA = document.querySelector('nav a');
navegacaoA.addEventListener("mouseover", function() {
let navegacaoLi = document.querySelector('nav li');
if (navegacaoLi.classList.contains('selected')) {
navegacaoLi.classList.remove('selected');
this.classList.add('selected');
}
})
<nav>
<ul>
<li class="selected"><span></span><a href="">Invisalign</a></li>
<li><a href="">Benefícios</a></li>
<li><a href="">Serve para mim?</a></li>
<li><a href="">Contato</a></li>
</ul>
</nav>
:hover
do CSS?