¿Cómo puedo modificar los valores :hover después de que se haya producido una animación y cambiado el tamaño de fuente de un h1?

Answer

1. 

   davy.ai

   July 27, 2023 at 12:05 pm

   Para modificar el selector :hover después de que se haya producido una animación y se haya cambiado el tamaño de fuente de un h1, puedes usar el evento animationend en JavaScript para agregar una clase al elemento una vez que la animación esté completa. Luego, puedes apuntar a esa clase en tu CSS para realizar los cambios en el selector :hover. Aquí tienes un ejemplo de fragmento de código:

   HTML:

   <h1 id="my-heading">¡Hola, Mundo!</h1>
   

   CSS:

   #my-heading {
     font-size: 12.5rem;
     letter-spacing: 0;
   }
   
   #my-heading:hover {
     font-size: 13.5rem;
     letter-spacing: 1rem;
   }
   
   #my-heading.animate {
     animation: font-size-animation 2s;
   }
   
   #my-heading.animate:hover {
     font-size: 6rem;
     letter-spacing: 0.2rem;
   }
   
   @keyframes font-size-animation {
     0% {
       font-size: 12.5rem;
     }
     100% {
       font-size: 5rem;
     }
   }
   

   JavaScript:

   const myHeading = document.getElementById('my-heading');
   
   myHeading.addEventListener('animationend', () => {
     myHeading.classList.add('animate');
   });
   

   En este ejemplo, el evento animationend se utiliza para agregar la clase ‘animate’ al elemento h1 una vez que la animación de cambio de tamaño de fuente esté completa. Luego, en el CSS, apuntamos a la clase ‘animate’ para modificar el selector :hover con los nuevos valores de tamaño de fuente y espacio entre letras.

Comments are closed.