如何修改：animation 發生后的 hover 值並更改 h1 的字體大小？

Question

在發生 animation 並更改 h1 的字體大小后，我該如何修改：hover？ 它是這樣的： text: font-size: 12.5rem; 字母間距：0； hover over the text- font-size: 13.5rem letter-spacing: 1rem; ，幾秒鍾后，帶有@keyframes 的 animation 出現，並且正在將字體大小從 12.5rem 更改為 5 rem。 應用了新的更改（字體大小：5rem;）我想再次對它進行 hover 但這次是：hover 的值要更改，當我 hover 的新值從動畫后變為 5 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>

如何修改：animation 發生后的 hover 值並更改 h1 的字體大小？

問題描述

1 個解決方案

解決方案1
0 2021-12-22 18:15:02

使用 vanilla Js 創建的解決方案

如何修改：animation 發生后的 hover 值並更改 h1 的字體大小？

問題描述

1 個解決方案

解決方案1 0 2021-12-22 18:15:02

使用 vanilla Js 創建的解決方案

解決方案1
0 2021-12-22 18:15:02