我如何修改 :hover 动画发生后的值并更改 h1 的字体大小？

Question

如何在动画发生后修改 :hover 并更改 h1 的字体大小？它是这样的：文本：字体大小：12.5rem；字母间距：0；将鼠标悬停在文本字体大小：13.5rem 字母间距：1rem；，几秒钟后，带有@keyframes 的动画出现并正在更改字体大小，从 12.5rem 到 5 rem。应用新更改后（字体大小：5rem；）我想再次将鼠标悬停在它上面，但这次 :hover 的值发生变化，我悬停时的大小从 5rem（动画后的新值）到 6 rem，字母间距，从 1rem 开始；到 0.2rem。我不知道该怎么做..请帮我一些代码

Answer 1

使用 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>

我如何修改 :hover 动画发生后的值并更改 h1 的字体大小？

How do i modify :hover values after an animation has occurred and changed the font-size of an h1?

html

css

hover

css-animations

使用 vanilla Js 创建的解决方案