Keep Hover on a button after taking the mouse out

Question

How to maintain the Hover effect after taking the mouse off the button? The code below has this function, but just by clicking, I’m very new to it, but I’m learning.

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>

Answer 1

Change that line btns[i].addEventListener("click", function() swap the "click" for "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>

Answer 2

The problem has already been explained in the other answer, which suggests you change the event click for mouseover. If you want something to happen when you pass the mouse then it really has to be the event mouseover. This way each time you mouse over the element, it changes the class ativo permanently, and so even if you take the mouse over all the elements, the class stays.

However the code to place and remove the class ativo is more complicated than it should be. If you refer to documentation you will see that each element has a property classList that allows you to modify the list of classes in a simple way. The methods relevant to the problem are:

• classList.add - Adds one more class to the element
• classList.remove - Removes the specified class from the widget’s class list

Using this the code that comes inside the event would look like this:

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
});

The two initial queries of elements to html, can also be simplified in one querySelectorAll forcing him to pick up only members of the class botao within the div777:

var btns = document.querySelectorAll("#div777 .botao");

Example with all that was mentioned:

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>