D
D
Dmitriy_Gultiaev2021-11-04 14:40:01
css
Dmitriy_Gultiaev, 2021-11-04 14:40:01

Why does the mouseenter and mouseleave event for objects inside stop working when a slick slider is connected?

When a slick slider is connected, for some objects inside the slider, the mouseenter and mouseleave events stop working.

6183c5e48ff67731252574.png
For the two objects on the right, everything works, for the next ones it doesn't. I provide code below:

//Подключение слайдера
$(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>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question