Is there an way to add an event listener to a node list?

im building an etch a sketch. I'm stuck on making the relevant divs change on hover. I can achieve this if i change the quereyselector to "div" instead of the class name, however I dont want that. Likely I need to change the logic completely. how would I be able to achieve this? The divs im attempting to change are the ones under the gridcontainer, with a class of .block as you can see in the HTML in the codepen.

https://codepen.io/hbz19/pen/KKRvezO

let colours = document.querySelector(".block");
colours.addEventListener("mouseover", () => {
    event.target.style.backgroundColor = "green";
});


let newGrid = document.querySelector('button')
newGrid.addEventListener("click", event => {
    if (event.target.nodeName == "BUTTON") {
        deleteChild();
        let userInput = howMany();
        let input = userInput * userInput;
        let pixel = 500 / userInput;
        for (let i = 0; i < input; i++) {
        let i = addGrid(pixel)
    }}
});

function howMany() {

    let userInput = prompt("how many?");
    return userInput
}

function addGrid(pixel) {

let container = document.querySelector(".gridcontainer");
let grid = document.createElement('div');
grid.classList = ('block');
grid.textContent = 'hi';
grid.style.height = pixel + 'px';
grid.style.width = pixel + 'px';
container.appendChild(grid);
}

function deleteChild() {

    let e = document.querySelector(".gridcontainer");
    let child = e.lastElementChild; 
    while (child) {
        e.removeChild(child);
        child = e.lastElementChild;
    }
}```