Add a class with hover to javascript

Question

Gentlemen, I encountered such a problem as adding a class when hovering, the class is added only to the first one, you can tell the block the code:

let hoverprice = document.querySelector('.category-items__price'); for (let i = 0; i < hoverprice.length; i++) { hoverprice[i].onmouseenter = animate; } function animate(e) { e.classList.add('rotateOutUpLeft'); } animate();

 <div class="category-items"> <div class="category-items__img"></div> <div class="category-items__price animated"> <span 1800 $></span> </div> <div clas="category-items__body"> <div class="category-items__title"> <span class="category-items__title-text"> Райские северные пляжи</span> <span class="category-items__title-descr"> Северные пляжи — экскурсия для тех, кто хочет расслабиться, насладиться красивыми видами, теплым морем и ласковым солнцем и почувствовать атмосферу гоанского рая!</span> </div> <div class="category-items__btn"> <a href="#"> <div class="category-items__link"></div> </a> </div> </div> </div> //// второй и их много вообщем <div class="category-items"> <div class="category-items__img"></div> <div class="category-items__price animated"> <span 1800 $></span> </div> <div clas="category-items__body"> <div class="category-items__title"> <span class="category-items__title-text"> Райские северные пляжи</span> <span class="category-items__title-descr"> Северные пляжи — экскурсия для тех, кто хочет расслабиться, насладиться красивыми видами, теплым морем и ласковым солнцем и почувствовать атмосферу гоанского рая!</span> </div> <div class="category-items__btn"> <a href="#"> <div class="category-items__link"></div> </a> </div> </div> </div>

I will make a reservation, the code does not work because you need to connect a bunch of libraries, I use animate.css, I ask for help
let hoverprice = document.querySelector('.category-items__price');
And what if we get a whole bunch of such elements, and then in a cycle we will direct them?
I need to get this class, from all the item and hang a class when hovering, I hardly understand it in js, tried querySelectorAll also does not work, I want to solve this problem on js, to understand why it doesn’t work

Bulat Kultash Bulat Kultash sixteen · Accepted Answer · 2019-03-13T13:17:54

 hoverPrice.forEach((item) => { item.addEventListener('mouseover', () =>{ item.classList.add('active') }); item.addEventListener('mouseleave', () => { function remove() { item.classList.remove('active') } setTimeout(remove, 1500) }); });

Add a class with hover to javascript

1 answer 1

More articles: