Html 内容转换后如何进行平滑悬停？

这是我的密码：

Html:

我现在正在学习css，我正在尝试的是实现一个只在悬停时显示文本的按钮，它不一定需要通过title属性，我只是觉得这样更简单、更友好

但是过渡不起作用，我怎样才能使它顺利地显示：之后的内容

JsFiddle：

我尝试跟踪链接的副本，但老实说，我无法复制它

.btn-icon:after{
  content: " "  attr(title);
  max-width: 0;
}

.btn-icon:hover:after{
    max-width: inherit;
    transition: 2s ease;
}

---

Fiddle:

我会使用类似于以下解决方案的方法：

.btn-icon::after{
    content: " "  attr(title);
    text-indent: -9999px;
    letter-spacing: -10px;
    opacity: 0;
    transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
    text-indent: 0px;
    letter-spacing: normal;
    opacity: 1;
}

---

第二次dup讨论高度，但同样的逻辑适用于高度/宽度。老实说，我无法复制它，并用我的tried@Mojimi@Bright在您的示例中，文本总是showing@Mojimi检查更新的小提琴。啊，太聪明了。你能解释一下为什么过渡不在悬停状态吗？@Mojimi把

过渡

想象成一个两态动画。当您声明一个

转换时

，您将声明哪些CSS属性在其值更改时将设置动画。在本例中，我为

字母间距

和

不透明度

声明了一个值，然后在

转换

中声明这两个属性都应该设置动画。因此，当我在伪类

：hover

中重新声明

字母间距

和

不透明度

的值时，它们将从我在初始状态声明的值转换为我在悬停状态声明的新值。@jsfiddle中的Mojimi，尝试将转换从初始状态切换到

：hover

状态-您将看到动画发生在hover上，但当您将光标移离按钮时不会发生。这是因为没有为处于初始状态的按钮声明

转换

，而动画仅在您将鼠标悬停在按钮上时发生。在某些情况下，这可能是您需要的行为

.btn-icon:after{
  content: " "  attr(title);
  max-width: 0;
}

.btn-icon:hover:after{
    max-width: inherit;
    transition: 2s ease;
}

.btn-icon::after{
    content: " "  attr(title);
    text-indent: -9999px;
    letter-spacing: -10px;
    opacity: 0;
    transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
    text-indent: 0px;
    letter-spacing: normal;
    opacity: 1;
}