When I hover over any of the grid items, I want the addToCartBar to only show on that specific item. However, currently it is only working on the first item. What am I missing?
Below is the relevant ejs code:
<div class="main-cont">
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img class="rotated-img" src="/AdidasAce.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
// more grid-items follow...
And here is the JS code:
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
let addToCartBar = document.querySelector('.add-to-cart')
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
addToCartBar.style.display = "flex"
})
}
I understand that the above code iterates through the array of cardItems and should display the addToCartBar for each one individually, but it's not working as expected. Any advice or suggestions would be greatly appreciated. Thank you.