Я реализовал появления div по ховеру через mouse over, но не могу понять как при нажатии на кнопку(которых может быть несколько) выскакивал блок, буду рад помощи) Пример:
const divs = document.querySelectorAll('.cards-list__item');
divs.forEach(el => {
el.addEventListener('mouseover', () => {
el.querySelector('.buy-wrapper').classList.toggle('visually-hidden');
})
});
divs.forEach(el => {
el.addEventListener('mouseout', () => {
el.querySelector('.buy-wrapper').classList.toggle('visually-hidden');
})
});
.cards-list {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0px 0px;
}
.cards-list__item {
width: 220px;
outline: 2px solid #eaeaea;
position: relative;
cursor: pointer;
margin-bottom: 20px;
margin-right: 20px;
position: relative;
}
.new {
background-image: url('https://danvarius.github.io/project-x/image/catalog-new.png');
background-repeat: no-repeat;
background-position: 100% 0;
}
.buy-wrapper {
display: flex;
margin: 0 auto;
padding: 25px 35px;
width: 150px;
flex-direction: column;
position: absolute;
top: 0px;
left: 0px;
background-color: #fff;
}
<ul class="cards-list">
<li class="cards-list__item">
<div class="buy-wrapper visually-hidden">
<button type="button" name="button" class="buy-popup" tabindex="-1">Купить</button>
<a class="bookmarks-window" tabindex="-1">Закладки</a>
</div>
<img src="https://danvarius.github.io/project-x/image/bosch-9000.png" alt="Фото перфоратора Bosch BFG 9000" class="item-img-big" width="184" height="164">
<h2 class="item-heading">Перфоратор BOSCH<br>BFG 9000</h2>
<span class="item-oldprice">32500 Р.</span>
<a href="#" class="item-newprice__link" aria-label="Цена: 25500 Р.">25500 Р.</a>
</li>
<li class="cards-list__item new">
<div class="buy-wrapper visually-hidden">
<button type="button" name="button" class="buy-popup" tabindex="-1">Купить</button>
<a class="bookmarks-window" tabindex="-1">Закладки</a>
</div>
<img src="https://danvarius.github.io/project-x/image/bosch-3000.png" alt="Фото перфоратора Bosch BFG 3000" class="item-img" width="127" height="112">
<h2 class="item-heading">Перфоратор BOSCH<br>BFG 3000</h2>
<span class="item-oldprice">22500 Р.</span>
<a href="#" class="item-newprice__link" aria-label="Цена: 15500 Р.">15500 Р.</a>
</li>
<li class="cards-list__item">
<div class="buy-wrapper visually-hidden">
<button type="button" name="button" class="buy-popup" tabindex="-1">Купить</button>
<a class="bookmarks-window" tabindex="-1">Закладки</a>
</div>
<img src="https://danvarius.github.io/project-x/image/bosch-6000.png" alt="Фото перфоратора Bosch BFG 6000" class="item-img-middle" width="144" height="128">
<h2 class="item-heading">Перфоратор BOSCH<br>BFG 6000</h2>
<span class="item-oldprice">30500 Р.</span>
<a href="#" class="item-newprice__link" aria-label="Цена: 25500 Р.">25500 Р.</a>
</li>
<li class="cards-list__item new">
<div class="buy-wrapper visually-hidden">
<button type="button" name="button" class="buy-popup" tabindex="-1">Купить</button>
<a class="bookmarks-window" tabindex="-1">Закладки</a>
</div>
<img src="https://danvarius.github.io/project-x/image/bosch-3000.png" alt="Фото перфоратора Bosch BFG 2000" class="item-img" width="127" height="112">
<h2 class="item-heading-big">Перфоратор BOSCH<br>BFG 2000</h2>
<a href="#" class="item-newprice__link" aria-label="Цена: 12500 Р.">12500 Р.</a>
</li>
</ul>
<!-- Само окно: -->
<section class="popup-catalog visually-hidden">
<a href="#" class="close-link-three"></a>
<div class="popup-catalog__line"></div>
<div class="popup-catalog__text">
<img class="img-popup" src="https://danvarius.github.io/project-x/image/icon-mark.png" alt="Картинка галочки об подверждении добавленого товара" width="21" height="21">
<p class="text-popup">Товар добавлен в корзину!</p>
</div>
<div class="footer-popup">
<a class="footer-popup__link" href="#">Оформить заказ</a>
<a class="footer-popup__link" href="#">Продолжить покупки</a>
</div>
</section>