0

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>

1
  • Qual é o objetivo dessa classe? Estilização? Então porque não faz diretamente pelo :hover do CSS?
    – Costamilam
    15/09/2020 às 16:47

2 Respostas 2

1

Você está complicando demais, não precisa de nenhum JS para colocar/tirar sublinhado no mouseover, só CSS:

a {
  text-decoration: none;
  }
  
a:hover {
  text-decoration: underline;
  }
<nav>
  <ul>
    <li><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>

0

Olá, não sei se essa é a melhor solução, mas pelo que eu entendi sobre a sua necessidade, funciona. Invés de usar classe, eu usei um atributo, que podemos facilmente estilizar e desabilitar através do javascript

    var li = document.querySelectorAll('li')
    var liSelected = document.querySelector('[selected=true]')
    for(var i = 0; i < li.length; i++){
        li[i].addEventListener('mouseover', function(){
            liSelected.setAttribute('selected', false)
            this.setAttribute('selected', 'true')
        })
        li[i].addEventListener('mouseleave', function(){
            liSelected.setAttribute('selected', true)
            this.setAttribute('selected', 'false')
        })
    }
a {
  color: #000;
  text-decoration: none;
}

[selected=true] a{
  text-decoration: underline;
  color: #00b;
}
<nav>
  <ul>
    <li selected="true"><a href="">Invisalign</a></li>
    <li selected="false"><a href="">Benefícios</a></li>
    <li selected="false"><a href="">Serve para mim?</a></li>
    <li selected="false"><a href="">Contato</a></li>
  </ul>
</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .