为了使每个 class 的效果单独工作（Javascript）

Question

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.

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

}

Answer 1

Try adding mouse hover css instead

.main-menu:hover {
    border-bottom: 5px solid black;
}

Answer 2

You can use loop and add effect to each element. You can do this with css as well

.main-menu:hover { border-bottom: 5px solid black; }

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