Remove/Add Class on menu hover

greglang 0
Viewed 18

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

event-listener javascript
1 Answers

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');
jkalandarov0
Related