css - 当您将鼠标悬停在文本上时如何使文本发生变化而不抽搐？

Question

据我了解，CSS 可以用来以基本方式更改 :hover 上元素的内容。我正在使用这段代码

HTML:

<button><span>3 replies</span></button>

CSS:

button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

但是当我将鼠标悬停在按钮上时，它抽搐得很厉害

我希望我的音乐播放器像 this link 一样流畅

当您将鼠标悬停在lease、premium或trackout价格下的按钮之一时，它们会切换到+添加文本

这是我的播放器的一部分 http://djwckd.com/test

Answer 1

重要的是确保您的布局不会在悬停时发生变化。实现此目的的最简单方法是在布局中为所有部分分配一些空间，即使不悬停也是如此。我不确定您想要实现哪种布局，但这是一个示例:

button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}

通过为 :before 伪元素指定大小，即使它没有悬停，布局也不会在内容更改时发生更改。您可能需要针对所需的特定布局进行调整，但一般原则是确保指定所有与大小相关的属性而没有 :hover，然后仅进行调整:hover 状态下的非布局属性(即不影响任何框大小的属性)。