使用“:悬停”;并使其恢复到它's较小(初始状态）

Making text larger in CSS using ":hover" and making it revert to it's smaller (initial state)

本文关键字：较小 初始状态 恢复 悬停 使用      更新时间：2023-09-26

让我解释一下我正在努力实现的目标。

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

问题是，当我使用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;
}

我有点卡住了，我试过not:(:hover)，但它什么都没用，我也用过:onmouseleave

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

谢谢。

您只需要将转换添加到#sname a（并关闭css块）：

#sname {
    margin-top: 100px;
    margin-bottom: 100px;
    color: rgba(1,1,1,0.7);
}
#sname a {
    font-weight: bold;
    font-size: 4em;
    transition: all 500ms;
}
    
#sname a:hover {
    font-size:88px;
    font-size-adjust: 20px;
}
<div id="sname">
    <a href="#">test</a>
</div>

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

#sname {
  margin-top: 100px;
  margin-bottom: 100px;
  color: rgba(1, 1, 1, 0.7);
}
#sname a {
  font-weight: bold;
  font-size: 4em;
  transition: all 500ms;
}
#sname a:hover {
  font-size: 88px;
  font-size-adjust: 20px;
}
<div id="sname">
  <a href="#">IT WORKS</a>
</div>

相关文章：