querySelectorAll() not working

Question

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

Answer 1

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