我如何修改：在影片發生后懸停并更改 h1 的字體大小？它是這樣的：文本：字體大小：12.5rem；字母間距：0；將滑鼠懸停在 text- font-size: 13.5rem letter-spacing: 1rem; ，幾秒鐘后，一個帶有@keyframes 的影片出現并且正在改變字體大小，從 12.5rem 到 5 rem。應用新的更改（字體大小：5rem；）我想再次將滑鼠懸停在它上面，但是這次 :hover 的值要更改，懸停時的大小從 5rem（影片后的新值）到 6 rem 和字母間距，從 1rem 開始；到 0.2rem。我不知道該怎么做..請幫我一些代碼
uj5u.com熱心網友回復：
使用 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390286.html