@Dmitriy_Gultiaev

Почему при подключении slick slider перестает работать событие mouseenter и mouseleave для объетов внутри?

При подключении slick slider для части объектов внутри слайдера перестает работать событие mouseenter и mouseleave

6183c5e48ff67731252574.png
Для двух объектов справа все работает, для последующих нет. Ниже предоставляю код:

//Подключение слайдера
$(document).ready(function(){
    $('.book-container').slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        prevArrow: $('.book__left'),
        nextArrow: $('.book__right')
    });
});
//Событие для объектов
const mainPageBooks = document.querySelectorAll('.book-container__item');

for (let item of mainPageBooks) {

    item.addEventListener('mouseenter', function(e){
        let mainPageBooksAttr = e.target.getAttribute('data-index-books');
        console.log(mainPageBooksAttr);
        let mainPageBooksImg = document.querySelector('.book-container__img[data-index-books=' + mainPageBooksAttr  + ']');
        console.log(mainPageBooksImg);
        let mainPageBooksDesc = document.querySelector('.book-container__desc[data-index-books=' + mainPageBooksAttr  + ']');
        console.log(mainPageBooksDesc);
        let mainPageBooksMore = document.querySelector('.book-container__more[data-index-books=' + mainPageBooksAttr  + ']');
        console.log(mainPageBooksMore);

        mainPageBooksImg.style.display = 'none';
        mainPageBooksDesc.style.display = 'flex';
        mainPageBooksMore.style.opacity = '100%';
    })

    item.addEventListener('mouseleave', function(e){
        let mainPageBooksAttr = e.target.getAttribute('data-index-books');
        let mainPageBooksImg = document.querySelector('.book-container__img[data-index-books=' + mainPageBooksAttr  + ']');
        let mainPageBooksDesc = document.querySelector('.book-container__desc[data-index-books=' + mainPageBooksAttr  + ']');
        let mainPageBooksMore = document.querySelector('.book-container__more[data-index-books=' + mainPageBooksAttr  + ']');

        mainPageBooksDesc.style.display = 'none';   
        mainPageBooksImg.style.display = 'block';
        mainPageBooksMore.style.opacity = '0%';
    })
}


//Код HTML
<div class="book-container">
                <div class="book-container__item" data-index-books='first-book'>
                    <div class="book-container__info">
                        <img src="img/first_book.png" alt="" class="book-container__img" data-index-books='first-book'>
                        <div class="book-container__desc" data-index-books='first-book'>
                            <div class="book-container__desc__top">
                                <p class="book-container__age">0+</p>
                                <p class="book-container__serious"><span>Серия </span>4 книги</p>
                                <p class="book-container__ildesc"><span>Иллюстрации</p>
                                <p class="book-container__ilauthor"><span>ЕВГЕНИЙ АНТОНЕНКОВ</p>
                                <p class="book-container__hoverdesc">Продолжение книги «Умная собачка Соня». Стихи и песни, которые маленькая собачка записывала в своем дневнике.</p>
                            </div>
                            <div class="book-container__desc__bottom">
                                <p class="book-container__madein"><span>ИЗДАНА В: </span>РОССИЯ</p>
                            </div>
                        </div>
                    </div>
                    <p class="book-container__name">СКАЗКИ ДЯДЮШКИ РИМУСА. ПРО МАЛЕНЬКИХ КРОЛЬЧАТ</p>
                    <p class="book-container__author">ДЖОЭЛЬ ЧАНДЛЕР ХАРРИС</p>
                    <p class="book-container__tags">СТИХИ, ПЕСНИ, РАССКАЗЫ, ИСТОРИЧЕСКИЙ, КЛАССИЧЕСКАЯ ЛИТЕРАТУРА</p>
                    <a class="book-container__more" href="" data-index-books='first-book'>ПОДРОБНЕЕ</a>
                </div>
                <div class="book-container__item" data-index-books='second-book'>
                    <div class="book-container__info">
                        <img src="img/second_book.png" alt="" class="book-container__img" data-index-books='second-book'>
                        <div class="book-container__desc" data-index-books='second-book'>
                            <div class="book-container__desc__top">
                                <p class="book-container__age">0+</p>
                                <p class="book-container__serious"><span>Серия </span>4 книги</p>
                                <p class="book-container__ildesc"><span>Иллюстрации</p>
                                <p class="book-container__ilauthor"><span>ЕВГЕНИЙ АНТОНЕНКОВ</p>
                                <p class="book-container__hoverdesc">Продолжение книги «Умная собачка Соня». Стихи и песни, которые маленькая собачка записывала в своем дневнике.</p>
                            </div>
                            <div class="book-container__desc__bottom">
                                <p class="book-container__madein"><span>ИЗДАНА В: </span>РОССИЯ</p>
                            </div>
                        </div>
                    </div>
                    <p class="book-container__name">ВОЛШЕБНОЕ ДЕРЕВО</p>
                    <p class="book-container__author">АНДРЕЙ УСАЧЕВ</p>
                    <p class="book-container__tags">СТИХИ, ПЕСНИ, РАССКАЗЫ</p>
                    <a class="book-container__more" href="" data-index-books='second-book'>ПОДРОБНЕЕ</a>
                </div>
                <div class="book-container__item" data-index-books='third-book'>
                    <div class="book-container__info">
                        <img src="img/third_book.png" alt="" class="book-container__img" data-index-books='third-book'>
                        <div class="book-container__desc" data-index-books='third-book'>
                            <div class="book-container__desc__top">
                                <p class="book-container__age">0+</p>
                                <p class="book-container__serious"><span>Серия </span>4 книги</p>
                                <p class="book-container__ildesc"><span>Иллюстрации</p>
                                <p class="book-container__ilauthor"><span>ЕВГЕНИЙ АНТОНЕНКОВ</p>
                                <p class="book-container__hoverdesc">Продолжение книги «Умная собачка Соня». Стихи и песни, которые маленькая собачка записывала в своем дневнике.</p>
                            </div>
                            <div class="book-container__desc__bottom">
                                <p class="book-container__madein"><span>ИЗДАНА В: </span>РОССИЯ</p>
                            </div>
                        </div>
                    </div>
                    <p class="book-container__name">ДНЕВНИК УМНОЙ СОБАЧКИ СОНИ</p>
                    <p class="book-container__author">АНДРЕЙ УСАЧЕВ</p>
                    <p class="book-container__tags">ПЕСНИ, РАССКАЗЫ, ИСТОРИЧЕСКИЙ</p>
                    <a class="book-container__more" href="" data-index-books='third-book'>ПОДРОБНЕЕ</a>
                </div>
                <div class="book-container__item" data-index-books='fourth-book'>
                    <div class="book-container__info">
                        <img src="img/first_book.png" alt="" class="book-container__img" data-index-books='fourth-book'>
                        <div class="book-container__desc" data-index-books='fourth-book'>
                            <div class="book-container__desc__top">
                                <p class="book-container__age">0+</p>
                                <p class="book-container__serious"><span>Серия </span>4 книги</p>
                                <p class="book-container__ildesc"><span>Иллюстрации</p>
                                <p class="book-container__ilauthor"><span>ЕВГЕНИЙ АНТОНЕНКОВ</p>
                                <p class="book-container__hoverdesc">Продолжение книги «Умная собачка Соня». Стихи и песни, которые маленькая собачка записывала в своем дневнике.</p>
                            </div>
                            <div class="book-container__desc__bottom">
                                <p class="book-container__madein"><span>ИЗДАНА В: </span>РОССИЯ</p>
                            </div>
                        </div>
                    </div>
                    <p class="book-container__name">СКАЗКИ ДЯДЮШКИ РИМУСА. ПРО МАЛЕНЬКИХ КРОЛЬЧАТ</p>
                    <p class="book-container__author">ДЖОЭЛЬ ЧАНДЛЕР ХАРРИС</p>
                    <p class="book-container__tags">СТИХИ, ПЕСНИ, РАССКАЗЫ, ИСТОРИЧЕСКИЙ, КЛАССИЧЕСКАЯ ЛИТЕРАТУРА</p>
                    <a class="book-container__more" href="" data-index-books='fourth-book'>ПОДРОБНЕЕ</a>
                </div>
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы