querySelectorAll() not working

JavaScript
1

I’m trying to give sections a class of ‘your-active-class’ which has a style on CSS.
So i want to give these sections that class so when a user hovers on the section, it looks active
but querySelectorAll() is not working as well as getElementsByTagName() so i had to use querySelector()but it only selects the first section

//Add active class to the active section 
let activeSection = document.getElementsByClassName("my-section").length;
document.querySelector(".my-section").addEventListener("mouseover", function mouseOver() {
    document.querySelector(".my-section").classList.add('your-active-class');
} );


//Remove activeness
let inActiveSection = document.querySelector('.my-section').addEventListener("mouseout",
function mouseOut() {
    document.querySelector('.my-section').classList.remove('your-active-class');
} );

I also tried this but it only selected the first sction only .

let elementsArray = document.querySelectorAll(".my-section");

elementsArray.forEach(function(elem) {
    elem.addEventListener("mouseover", function() {
        document.querySelector(".my-section").classList.add('your-active-class');
    });
});

Please HELP :blue_heart: :heart:

2

In the second code, try using code below because when you use document.querySelector it selects the first element with class .my-section:

elem.classList.add('your-active-class');
3

It worked ! Thank you so much :blue_heart: :heart_eyes: