0

Я реализовал появления 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>

5
  • @АлексейШиманский исправил 4 фев 2021 в 15:42
  • Добавьте на кнопки событие onclick и при его срабатывании, отобразите блок где вам надо.
    – Lukas
    4 фев 2021 в 21:14
  • @Lukas не поделитесь кодом как это сделать ибо я в js почти ноль) 4 фев 2021 в 22:13
  • divs.forEach(el => { el.addEventListener('click', () => { document.querySelector('.popup-catalog').classList.remove('visually-hidden'); }) });
    – Lukas
    5 фев 2021 в 0:15
  • @Lukas спасибо большое) 5 фев 2021 в 12:49

1 ответ 1

0

Не рекомендую использовать visually-hidden для попапа, потому что так он остается в разметке. Как вариант добавил просто класс hidden со свойством display: none;

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');
  })
});

const popupBtn = document.querySelectorAll('.buy-popup')
const popup = document.querySelectorAll('.popup-catalog')

//функция скрывающая popup через полторы секунды
function removePopup() {
  setTimeout(() => {
    popup[0].classList.add('hidden');
  }, 1000)
}
//вызов по клику
popupBtn.forEach(el => {
  el.addEventListener('click', () => {
    popup[0].classList.remove('hidden');
    removePopup();
  })
});
.wrapper {
  display: flex;
  justify-content: center;
  margin-top: 200px;
}
.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;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0)
}

.hidden {
  display: none;
}
<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 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.