При подключении slick slider для части объектов внутри слайдера перестает работать событие mouseenter и mouseleave
Для двух объектов справа все работает, для последующих нет. Ниже предоставляю код:
//Подключение слайдера
$(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>
