1

Como manter o efeito do hover após tirar o mouse do botão? O código abaixo tem essa função, mas apenas ao clicar, eu sou bem novo nisso, mas estou aprendendo.

var header = document.getElementById("div777");
var btns = header.getElementsByClassName("botao");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("ativo");
    current[0].className = current[0].className.replace(" ativo", "");
    this.className += " 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>

2 Respostas 2

2

Mude nessa linha btns[i].addEventListener("click", function() troque o "click" por "mouseover"

var header = document.getElementById("div777");
var btns = header.getElementsByClassName("botao");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("mouseover", function() {
    var current = document.getElementsByClassName("ativo");
    current[0].className = current[0].className.replace(" ativo", "");
    this.className += " 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>

1

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>

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