Tengo el siguiente código JavaScript:
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'; }); }); });Necesito sacar estos 2 estilos de los eventos y dejarlos en el código JS, no ponerlos en el archivo CSS.
cardBg.style.transition = 'all .3s ease-out'; cardText.style.transition = 'all .3s ease-out';La forma en que lo hice en el código anterior no funciona. ¿Qué tiene de malo?
Es porque su cardBg y cardText son matrices. Debe recorrerlos como lo hizo con las tarjetas si desea cambiar su estilo CSS. O si está seguro de que solo tiene un elemento, puede hacer lo siguiente:
cardBg[0].style.transition = 'all .3s ease-out'; cardText[0].style.transition = 'all .3s ease-out';