let categoriesListItems = document.querySelectorAll('.categories-list li');
let catListBlock = document.querySelectorAll('.cat-list-block');
let isMouseOver = false;
//console.table(catListBlock);
categoriesListItems.forEach(function(arrayVal, arrayIndex){
arrayVal.addEventListener('mouseenter', function(event){
activeItem(arrayIndex);
});
});
// takes the index value from the element that triggered the function
// add a 'active' class to the cat-list-block of the same index
// AND removes all other active classes if any
function activeItem(index){
var index = index;
catListBlock.forEach(function(arrayVal, arrayIndex){
if(arrayIndex != index){
catListBlock[arrayIndex].classList.remove('active');
}else{
catListBlock[arrayIndex].classList.add('active');
}
});
}
Comments