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

小编典典

css

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

由于每个评论的回复数量各不相同，因此我无法执行简单的mouseover /
mouseout脚本。解决该问题的一种方法是将答复数作为变量传递，并创建一个小的函数来处理它。但是必须有一个更简单的方法。我尝试在CSS中使用：hover东西来更改标签的内容（具有CSS属性内容），但是还没有运气。

任何帮助表示赞赏，谢谢！

阅读 287

2020-05-16

共1个答案

小编典典

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

HTML：

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

CSS：

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

编辑：这可以在IE8中使用，但不能在其兼容模式下使用，所以我认为IE7已退出。那会是个问题吗？

2020-05-16