如何在动画发生并更改 h1 的字体大小后修改 :hover 值？
Posted
技术标签:
【中文标题】如何在动画发生并更改 h1 的字体大小后修改 :hover 值？【英文标题】：How do i modify :hover values after an animation has occurred and changed the font-size of an h1? 【发布时间】：2022-01-23 20:55:16 【问题描述】：如何在动画发生后修改 :hover 并更改 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。 我不知道该怎么做..请帮我一些代码
【问题讨论】：
我认为使用 vanilla css 是不可能的，但我会尝试使用 Vanilla js 创建，然后我会给出答案:) 我会尽力帮助你，因为没有人给你答案，现在我发给你答案 非常感谢 非常感谢，我喜欢帮助 :) :)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) 我知道它的感觉，再次非常感谢:))！ 【参考方案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>【讨论】：
以上是关于如何在动画发生并更改 h1 的字体大小后修改 :hover 值？的主要内容，如果未能解决你的问题，请参考以下文章