O problema já foi explicado na outra resposta, que lhe sugere trocar o evento click
por mouseover
. Se você quer que algo acontece quando passa o rato então tem mesmo de ser o evento mouseover
. Desta forma cada vez que passa o mouse por cima do elemento, ele troca o classe ativo
de forma permanente, e por isso mesmo que tire o mouse por cima de todos os elementos, a classe mantem-se.
No entanto o código de colocar e retirar a classe ativo
está mais complicado do que devia. Se consultar a documentação irá ver que cada elemento tem uma propriedade classList
que permite modificar a lista de classes de uma forma simples. Os métodos relevantes para o problema são:
classList.add
- Adiciona mais uma classe ao elemento
classList.remove
- Retira a classe indicada da lista de classes do elemento
Utilizando isto o código que vem dentro do evento ficaria assim:
btns[i].addEventListener("mouseover", function() {
var current = document.getElementsByClassName("ativo")[0]; //apanhar o ativo
current.classList.remove("ativo"); //remover a classe nele
this.classList.add("ativo"); //adicionar a classe ativo naquele onde tem o mouse
});
As duas buscas iniciais de elementos ao html, também podem ser simplificadas numa só utilizando querySelectorAll
forçando que apanhe apenas elementos da classe botao
dentro do div777
:
var btns = document.querySelectorAll("#div777 .botao");
Exemplo com tudo o que foi mencionado:
var btns = document.querySelectorAll("#div777 .botao");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("mouseover", function() {
var current = document.getElementsByClassName("ativo")[0];
current.classList.remove("ativo");
this.classList.add("ativo");
});
}
.botao {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
.ativo, .botao:hover {
background-color: #666;
color: white;
}
<div id="div777">
<a class="botao">1</a>
<a class="botao ativo">2</a>
<a class="botao">3</a>
<a class="botao">4</a>
<a class="botao">5</a>
</div>