To make the effect work separately for each class (Javascript)

There are three classes named "main-menu."
I want to apply the effect that underlines when I raise the mouse cursor in the area corresponding to each class.
I know that the current target is in the 0th index of the class and I have to use variables, but I don’t know how to change that to suit the situation.
I would appreciate it if you could tell me how to solve this problem.

enter image description here

window.onload = function(){
var target = document.getElementsByClassName("main-menu")[0];
target.addEventListener('mouseover', function(){
    target.style.borderBottom = "5px solid black";
});
target.addEventListener('mouseout', function(){
    target.style.borderBottom = "none";
});

}

2 thoughts on “To make the effect work separately for each class (Javascript)”

Leave a Comment