javascript - 悬停时更改文本，然后返回到上一个文本

我有一个评论系统，每条评论都有一个按钮，通常会显示回复的数量。我希望当用户将鼠标悬停在按钮上时，文本从“3 条回复”变为“回复!”，然后，当鼠标离开按钮时，文本返回到“3 条回复”。

因为每个评论的回复数量不同，我不能做一个简单的鼠标悬停/鼠标悬停脚本。解决它的一种方法是将回复数作为变量传递，并制作一个小函数来处理它。但必须有更简单的方法。我尝试使用 css 中的 :hover 来更改标签的内容(使用 css 属性内容)，但还没有成功。

感谢任何帮助，谢谢!

最佳答案

是的，您可以使用 CSS content。要在普通文本和“回复!”之间切换，请将普通文本放在 span 中，并在悬停时隐藏它。

button {
  width: 6em
}

button:hover span {
  display: none
}

button:hover:before {
  content: "Reply!"
}

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

编辑:这在 IE8 中有效，但在其兼容模式下无效，所以我假设 IE7 已经过时了。会有问题吗？

关于javascript - 悬停时更改文本，然后返回到上一个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9913293/