Наведения мыши на карточку товара?
У меня есть вот такие карточки-табы, при наведении на карточку меняються слайды и скроллбар снизу. Подскажите пожалуйста почему скроллбар применяется только к первой карточке? и почему скроллбар появляется не сразу при наведении на карточку, а после того как на другие произошло наведение. Спасибо за помощь, я еще учу js. https://jsfiddle.net/o0j5rv76/29/
function tabs() {
const tabs = document.querySelectorAll('[data-tabs]');
let tabsActiveHash = [];
if (tabs.length > 0) {
const hash = getHash();
if (hash && hash.startsWith('tab-')) {
tabsActiveHash = hash.replace('tab-', '').split('-');
}
tabs.forEach((tabsBlock, index) => {
tabsBlock.classList.add('_tab-init');
tabsBlock.setAttribute('data-tabs-index', index);
tabsBlock.addEventListener("mouseover", setTabsAction);
initTabs(tabsBlock);
});
}
// Установка позиций заголовков
function setTitlePosition(tabsMediaArray, matchMedia) {
tabsMediaArray.forEach(tabsMediaItem => {
tabsMediaItem = tabsMediaItem.item;
let tabsTitles = tabsMediaItem.querySelector('[data-tabs-titles]');
let tabsTitleItems = tabsMediaItem.querySelectorAll('[data-tabs-title]');
let tabsContent = tabsMediaItem.querySelector('[data-tabs-body]');
let tabsContentItems = tabsMediaItem.querySelectorAll('[data-tabs-item]');
tabsTitleItems = Array.from(tabsTitleItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem);
tabsContentItems = Array.from(tabsContentItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem);
tabsContentItems.forEach((tabsContentItem, index) => {
if (matchMedia.matches) {
tabsContent.append(tabsTitleItems[index]);
tabsContent.append(tabsContentItem);
tabsMediaItem.classList.add('_tab-spoller');
} else {
tabsTitles.append(tabsTitleItems[index]);
tabsMediaItem.classList.remove('_tab-spoller');
}
});
});
}
// Работа с контентом
function initTabs(tabsBlock) {
let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-titles]>*');
let tabsContent = tabsBlock.querySelectorAll('[data-tabs-body]>*');
const tabsBlockIndex = tabsBlock.dataset.tabsIndex;
const tabsActiveHashBlock = tabsActiveHash[0] == tabsBlockIndex;
if (tabsActiveHashBlock) {
const tabsActiveTitle = tabsBlock.querySelector('[data-tabs-titles]>._tab-active');
tabsActiveTitle ? tabsActiveTitle.classList.remove('_tab-active') : null;
}
if (tabsContent.length) {
tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock);
tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock);
tabsContent.forEach((tabsContentItem, index) => {
tabsTitles[index].setAttribute('data-tabs-title', '');
tabsContentItem.setAttribute('data-tabs-item', '');
if (tabsActiveHashBlock && index == tabsActiveHash[1]) {
tabsTitles[index].classList.add('_tab-active');
}
tabsContentItem.hidden = !tabsTitles[index].classList.contains('_tab-active');
});
}
}
function setTabsStatus(tabsBlock) {
let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-title]');
let tabsContent = tabsBlock.querySelectorAll('[data-tabs-item]');
const tabsBlockIndex = tabsBlock.dataset.tabsIndex;
function isTabsAnamate(tabsBlock) {
if (tabsBlock.hasAttribute('data-tabs-animate')) {
return tabsBlock.dataset.tabsAnimate > 0 ? Number(tabsBlock.dataset.tabsAnimate) : 500;
}
}
const tabsBlockAnimate = isTabsAnamate(tabsBlock);
if (tabsContent.length > 0) {
const isHash = tabsBlock.hasAttribute('data-tabs-hash');
tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock);
tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock);
tabsContent.forEach((tabsContentItem, index) => {
if (tabsTitles[index].classList.contains('_tab-active')) {
if (tabsBlockAnimate) {
_slideDown(tabsContentItem, tabsBlockAnimate);
} else {
tabsContentItem.hidden = false;
}
if (isHash && !tabsContentItem.closest('.popup')) {
setHash(`tab-${tabsBlockIndex}-${index}`);
}
} else {
if (tabsBlockAnimate) {
_slideUp(tabsContentItem, tabsBlockAnimate);
} else {
tabsContentItem.hidden = true;
}
}
});
}
}
function setTabsAction(e) {
const el = e.target;
if (el.closest('[data-tabs-title]')) {
const tabTitle = el.closest('[data-tabs-title]');
const tabsBlock = tabTitle.closest('[data-tabs]');
let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-titles]>*');
let progressesBlock = document.querySelector(".products-search-header__progress-block");
let progresses = document.querySelectorAll(".products-search-header__progress");
if (!tabTitle.classList.contains('_tab-active') && !tabsBlock.querySelector('._slide')) {
let tabActiveTitle = tabsBlock.querySelectorAll('[data-tabs-title]._tab-active');
tabActiveTitle.length ? tabActiveTitle = Array.from(tabActiveTitle).filter(item => item.closest('[data-tabs]') === tabsBlock) : null;
tabActiveTitle.length ? tabActiveTitle[0].classList.remove('_tab-active') : null;
tabTitle.classList.add('_tab-active');
setTabsStatus(tabsBlock);
progressesBlock.classList.add("_active");
}
tabsBlock.classList.remove("_active")
tabsTitles.forEach(function(item) {
item.addEventListener("mouseover", function(e) {
tabsTitles.forEach(function(e) {
if (e.classList[1] == "_active") {
e.classList.remove("_active");
}
})
progresses.forEach(function(e) {
if (e.classList[1] == "_active") {
e.classList.remove("_active");
}
})
let attr = item.getAttribute("data-id");
progresses.forEach(function(e) {
if (e.getAttribute("data-id") == attr) {
e.classList.add("_active");
}
})
});
item.addEventListener("mouseout", function(e) {});
})
e.preventDefault();
}
}
}
function getHash() {
if (location.hash) { return location.hash.replace('#', ''); }
}
tabs();.catalog__cards {
display: flex;
flex-wrap: wrap;
margin: -20px -12px -20px -12px;
padding: 30px 0px 0px 0px;
}
.catalog__card {
flex: 0 1 33.3333%;
height: 100%;
padding: 20px 12px;
}
.products-search-header__image-slider {
display: flex;
position: relative;
}
.products-search-header__progress-block {
bottom: 4px;
display: flex;
flex-direction: row;
gap: 2px;
left: 4px;
opacity: 0;
position: absolute;
right: 4px;
transition: opacity 0.3s ease 0s;
}
.products-search-header__progress-block._active {
opacity: 1;
}
.products-search-header__progress {
background: #111;
border-radius: 1px;
flex-grow: 1;
flex-shrink: 1;
height: 5px;
opacity: 0.4;
width: 100%;
z-index: 1;
transition: opacity 0.3s ease 0s;
}
.products-search-header__progress._active {
opacity: 1;
}
.image-slider__tabs {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: row;
z-index: 1;
}
.image-slider__tab {
flex-grow: 1;
flex-shrink: 1;
height: 100%;
position: relative;
width: 100%;
}
.image-slider__slide img {
width: 100%;
height: 100%;
}<div class="catalog__cards">
<div class="catalog__card products-search-header">
<div class="products-search-header__slide">
<a href="#" class="products-search-header__content">
<div class="products-search-header__image">
<div data-tabs class="products-search-header__image-slider image-slider">
<nav data-tabs-titles class="image-slider__tabs">
<button data-id="1" type="button" class="image-slider__tab _tab-active"></button>
<button data-id="2" type="button" class="image-slider__tab"></button>
<button data-id="3" type="button" class="image-slider__tab"></button>
</nav>
<div data-tabs-body class="image-slider__slides">
<div class="image-slider__slide">
<img src="https://klike.net/uploads/posts/2020-04/1588144832_1.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://fikiwiki.com/uploads/posts/2022-02/thumbs/1645026887_46-fikiwiki-com-p-krasivie-kartinki-platya-49.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://bipbap.ru/wp-content/uploads/2017/05/7a499eb85134c69029a4d195cc7e4d1f.jpg" alt="">
</div>
</div>
<div class="products-search-header__progress-block">
<span data-id="1" class="products-search-header__progress"></span>
<span data-id="2" class="products-search-header__progress"></span>
<span data-id="3" class="products-search-header__progress"></span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="catalog__card products-search-header">
<div class="products-search-header__slide">
<a href="#" class="products-search-header__content">
<div class="products-search-header__image">
<div data-tabs class="products-search-header__image-slider image-slider">
<nav data-tabs-titles class="image-slider__tabs">
<button data-id="1" type="button" class="image-slider__tab _tab-active"></button>
<button data-id="2" type="button" class="image-slider__tab"></button>
<button data-id="3" type="button" class="image-slider__tab"></button>
</nav>
<div data-tabs-body class="image-slider__slides">
<div class="image-slider__slide">
<img src="https://klike.net/uploads/posts/2020-04/1588144832_1.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://fikiwiki.com/uploads/posts/2022-02/thumbs/1645026887_46-fikiwiki-com-p-krasivie-kartinki-platya-49.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://bipbap.ru/wp-content/uploads/2017/05/7a499eb85134c69029a4d195cc7e4d1f.jpg" alt="">
</div>
</div>
<div class="products-search-header__progress-block">
<span data-id="1" class="products-search-header__progress"></span>
<span data-id="2" class="products-search-header__progress"></span>
<span data-id="3" class="products-search-header__progress"></span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="catalog__card products-search-header">
<div class="products-search-header__slide">
<a href="#" class="products-search-header__content">
<div class="products-search-header__image">
<div data-tabs class="products-search-header__image-slider image-slider">
<nav data-tabs-titles class="image-slider__tabs">
<button data-id="1" type="button" class="image-slider__tab _tab-active"></button>
<button data-id="2" type="button" class="image-slider__tab"></button>
<button data-id="3" type="button" class="image-slider__tab"></button>
</nav>
<div data-tabs-body class="image-slider__slides">
<div class="image-slider__slide">
<img src="https://klike.net/uploads/posts/2020-04/1588144832_1.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://fikiwiki.com/uploads/posts/2022-02/thumbs/1645026887_46-fikiwiki-com-p-krasivie-kartinki-platya-49.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://bipbap.ru/wp-content/uploads/2017/05/7a499eb85134c69029a4d195cc7e4d1f.jpg" alt="">
</div>
</div>
<div class="products-search-header__progress-block">
<span data-id="1" class="products-search-header__progress"></span>
<span data-id="2" class="products-search-header__progress"></span>
<span data-id="3" class="products-search-header__progress"></span>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="catalog__card products-search-header">
<div class="products-search-header__slide">
<a href="#" class="products-search-header__content">
<div class="products-search-header__image">
<div data-tabs class="products-search-header__image-slider image-slider">
<nav data-tabs-titles class="image-slider__tabs">
<button data-id="1" type="button" class="image-slider__tab _tab-active"></button>
<button data-id="2" type="button" class="image-slider__tab"></button>
<button data-id="3" type="button" class="image-slider__tab"></button>
</nav>
<div data-tabs-body class="image-slider__slides">
<div class="image-slider__slide">
<img src="https://klike.net/uploads/posts/2020-04/1588144832_1.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://fikiwiki.com/uploads/posts/2022-02/thumbs/1645026887_46-fikiwiki-com-p-krasivie-kartinki-platya-49.jpg" alt="">
</div>
<div class="image-slider__slide">
<img src="https://bipbap.ru/wp-content/uploads/2017/05/7a499eb85134c69029a4d195cc7e4d1f.jpg" alt="">
</div>
</div>
<div class="products-search-header__progress-block">
<span data-id="1" class="products-search-header__progress"></span>
<span data-id="2" class="products-search-header__progress"></span>
<span data-id="3" class="products-search-header__progress"></span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>