I have the following JavaScript code:
const cardWrapper = document.querySelectorAll('.card__wrapper');
cardWrapper.forEach((cont) => {
const cards = cont.querySelectorAll('.card');
const cardBg = cont.querySelectorAll('.card-bg');
const cardText = cont.querySelectorAll('.card__text');
cardBg.style.transition = 'all .3s ease-out';
cardText.style.transition = 'all .3s ease-out';
cards.forEach((el, i) => {
el.addEventListener('mouseenter', () => {
cardBg[i].style.maxHeight = '100%';
cardText[i].style.maxHeight = '100%';
});
el.addEventListener('mouseleave', () => {
cardBg[i].style.maxHeight = '56px';
cardText[i].style.maxHeight = '56px';
});
});
});I need to take these 2 styles out of events and leave them in the JS code, not put them in the CSS file.
cardBg.style.transition = 'all .3s ease-out';
cardText.style.transition = 'all .3s ease-out';The way I did in the code above doesn't work. What's wrong with it?
It's because your cardBg and cardText are arrays. You need to loop over them like you did for cards if you want to change their CSS style. Or if you sure you only have one element you can do the following:
cardBg[0].style.transition = 'all .3s ease-out';
cardText[0].style.transition = 'all .3s ease-out';