I have tried so many ways to simply get a class to change on an image when I hover over a menu item and it is driving me bonkers. If someone can help me get this straight I would appreciate some help... In the end I will have three of these in place, one for Red, Yellow, and Blue... here is what I have for one example...
<script>
const triggerRed = document.getElementsByClassName('gardenBtn');
const redIMG = document.getElementById('gardenMe');
// 👇️ Change
triggerRed.addEventListener('mouseover', function handleMouseOver() {
list = redIMG.classList;
list.remove('risoMe');
});
// 👇️ Change back
triggerRed.addEventListener('mouseout', function handleMouseOut() {
list = redIMG.classList;
list.add('risoMe');
});
</script>
But nothing changes
I don't see anywhere you declaring list variable. Anyway, if you want to add a class to that element:
list.classList.add('class-name');
if you want to remove a class:
list.classList.remove('class-name');