Changing background of a div when hovered over a link Vanilla JS

Question

I am looking to change the background of one class of div's called "grid-light" when I hover over a link on the page. I feel my JS is correct but I am not getting the result I am looking for. Here is my code:

grid-light

JS

an element to hover over

class to change "grid-light" to

Answer 1

https://gyazo.com/f36d9970fa6100e2ac9af41a1d2d7a59

This link shows you what i think you're going for, you declare your variables, on mouse over of your link1, it will change div1 items to red on mouse out of your link1, it will change div1 back to black

Please let me know if i can clarify more!

Answer 2

It looks like you're trying to use the elements like jquery, and className is a React thing.

div1.className = "div1hovered";

Instead with javascript you can access the classList:

div1.classList.add("div1hovered");

Also recommended to do this with CSS:

div1:hover {
    background-color: red;
}