I'm trying to change the background image depending on which symbol is being hovered but when I try to return changebackground([i])it always returns an array with length 1 and the number 0.

How can I make it so it returns the number of the symbol that was hovered? for example, If the second symbol is hovered, I want it to return a checkbackground([1]) to the function changebackground(logo) Here you can look at the symbols to get an idea.

Below is my code

let background = document.getElementById("main_home_container");
let factionlogo = document.getElementsByClassName("home_image");


for (i = 0; i < factionlogo.length; i++) {
  factionlogo[i].addEventListener("mouseenter", function() {
    changebackground([i])
  });
  factionlogo[i].addEventListener("mouseleave", revertbackground);
}

function changebackground(logo) {
  if(logo == 0) {
    background.style.backgroundImage = 'url("/Img/bg1.png")';
  } else if(logo == 1) {
    background.style.backgroundImage = 'url("/Img/bg2.png")';
  }
  };

function revertbackground() {
  background.style.backgroundImage = 'url("/Img/home.png")';
  };