querySelectorAll() not working

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() {
} );

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

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() {

Please HELP :blue_heart: :heart:

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


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