Javascript 使用“使CSS中的文本变大”：悬停“；并使其恢复到原来的状态'；s较小（初始状态）

让我解释一下我想要达到的目标

我在我的网站上有文本，我想在用户鼠标悬停时变大，在用户离开鼠标悬停时变小

问题是，当我使用CSS中的

：hover

方法将其放大时，之后我无法恢复到它以前的（初始）状态

#sname{
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}

#sname a{
    font-weight: bold;
    font-size: 4em;
}

#sname a:hover{
    font-size:88px;
    transition: all 500ms;
    font-size-adjust: 20px;

}

我有点卡住了，我试过

不：（：hover）

但它什么都不做，我也用过

：onmouseleave

---

这是一个大学项目的网站，我的工作大部分已经完成（必须将它链接到数据库），但我只是想通过CSS使它看起来更好，我会使用javascript，但对它的工作原理知之甚少

---

谢谢。

您只需将转换添加到

#sname a

（并关闭css块）：

#sname{
边缘顶部：100px；
边缘底部：100px；
颜色：rgba（1,1,1,0.7）；
}
#圈套{
字体大小：粗体；
字号：4em；
过渡：所有500ms；
}
#陷阱a：悬停{
字号：88px；
字体大小调整：20px；
}

---

您的代码正常工作，您只需将转换移到初始a状态并关闭css中的括号：）

#sname{
边缘顶部：100px；
边缘底部：100px；
颜色：rgba（1,1,1,0.7）；
}
#圈套{
字体大小：粗体；
字号：4em；
过渡：所有500ms；
}
#陷阱a：悬停{
字号：88px；
字体大小调整：20px；
}

你能提供一个JSFIDLE示例吗？向我们展示你的HTML结构，因为它应该可以工作（）“我的网站上有文本，我想在用户鼠标悬停时变大，在用户离开鼠标悬停时变小。”从设计和用户体验角度来看，这可能是个坏主意。你忘了关闭css规则中的一些花括号。。。这就是问题所在…托玛拉克，你能详细说明一下吗？感兴趣。然后您可以从

：hover

状态中省略

转换。