How do i modify :hover after an animation has occurred and changed the font-size of an h1? it goes like this: text: font-size: 12.5rem; letter-spacing: 0; hover over the text- font-size: 13.5rem letter-spacing: 1rem; , after a few seconds, an animation with @keyframes comes and is changing the font-size, from 12.5rem to 5 rem. with the new change applied (font-size: 5rem;) I want to hover over it again but this time the values of :hover to change, the size when I hover to be from 5rem(the new values after the animation) to 6 rem, and letter-spacing, from 1rem; to 0.2rem. i don't know how to do it.. please help me with some code
CodePudding user response：
solution created with vanilla Js
let title = document.getElementById('title');
let i = 0;
title.addEventListener('mouseover', function() {
if (i >= 1) {
hoverText(5, 6);
title.removeEventListener('mouseover', function() {});
} else {
hoverText(12.5, 13.5);
i ;
}
});
function hoverText(small, big) {
title.style.fontSize = big "rem";
setTimeout(function() {
title.style.fontSize = small "rem";
}, 1000);
}h1#title {
font-size: 12.5rem;
letter-spacing: 0;
transition-duration: 1s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<h1 id="title">h1 element</h1>
</body>
</html>