How to find out which element of the array is hovered over?

Question

JavaScript

const topItems = document.querySelectorAll('.top_nav-container li');
  const botItems = document.querySelectorAll('.bott_nav-container div');

  console.log(topItems);
  console.log(botItems);

How to make the .active class added to the first element of the second list when hovering over the first element of the first list?

Answer 1

Well, here's a simple solution, but it only works if the lists match.

const topItems = document.querySelectorAll('.top_nav-container li');
const botItems = document.querySelectorAll('.bott_nav-container div');

//Используем цикл forEach чтоб пройти по всем элемента массива(списка)
topItems.forEach((item, i) =>{
    item.addEventListener("mouseover", function() {
        // при наведении на любой элемент списка topItems тому же эл.
        // из botItems мы добавляем класс, однако как и говорилось для этого
        // списки должны быть идентичными
        botItems[i].classList.add("active") 
    });

    item.addEventListener("mouseleave", function() {
        // Тут делаем так чтоб при уходе с элемента класс также удалялся у соотв. эл. botItems
        botItems[i].classList.remove("active") 
    })
    
})

Answer 2

On the desired objects, you can hang a handler that is triggered when the cursor is hovered/left.