1

Всем доброго времени суток!

Пишу небольшой скрипт переключения активной картинки у объектов недвижимости, по типу как сделано в Яндекс недвижимости (https://realty.ya.ru/sevastopol/kupit/kvartira/odnokomnatnaya/novostroyki/), двигаем мышкой на объявлении, изменяется активная картинка, если картинки закончились показываем тёмную область где пишется сколько картинок ещё в полном описании.

Моя верстка и скрипт - https://codepen.io/iwan-klepalskij/pen/QWBREXa

Проблема заключается в том, что когда становится активной область с надписью сколько картинок в полном описании, я не знаю как отследить дальнейшие движения мышкой на блоке который должен переключать картинки. В моем скрипте эта область становится активной вот здесь

  if(bulletIndicators[pIndex].classList.contains('more_photo')){
    galleryShowMore.classList.add('active');
    //а вот здесь проблема, как отследить дальнейшие движения на элементе pTileItem, если galleryShowMore перекрывает его....
    }

Подскажите как ловить события при дальнейших движениях на объекте который перекрывается этим элементом. Т.е. прятать эту темную область и показывать активные картинки согласно наведению на них.

1 ответ 1

1

А задачка решилась простым добавлением z-index к классу p-tile__item, теперь "тёмный" элемент не перекрывает навигацию по картинкам и в прослушивании события pTileItem.addEventListener('mouseenter') добавляем

 if(bulletIndicators[pIndex].classList.contains('more_photo')){
   galleryShowMore.classList.add('active');
 }else{
   galleryShowMore.classList.remove('active');
 }

https://codepen.io/iwan-klepalskij/pen/QWBREXa

Буду признателен старшим братьям по разуму за мой код ревью :)

3
  • Опередил, я только пришел с ответом)) Можно еще так: galleryShowMore.addEventListener('mouseout', () => galleryShowMore.classList.remove('active')). А вообще у Яндекса вроде как все на чистом css реализовано
    – aford
    8 фев в 8:10
  • не, у яши не чистый CSS там "тёмный" элемент добавляется в DOM
    – Ivan K
    8 фев в 8:17
  • galleryShowMore.addEventListener('mouseout', () без z-index это тоже не решало бы проблему, пробовал как вы писали вчера не помогало, а сегодня вспомнил про z-index :)
    – Ivan K
    8 фев в 8:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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