在悬停时更改文字，然后返回上一个文本 [英] Change text on hover, then return to the previous text
问题描述
我有一个注释系统，每个注释都有一个按钮，通常显示它的回复数量。我想当用户将鼠标悬停在按钮上时，文本从3个回复变为回复！，然后当鼠标离开按钮时，文本返回到3回复。
I have a system of comments, and each comment has a button that normally displays the number of replies to it. I want that when a user hovers over the button, the text changes from "3 replies" to "Reply!", and then, when the mouse leaves the button, the text returns to "3 replies".
因为每个注释的回复数量不同，我不能做一个简单的mouseover / mouseout脚本。一种解决方法是将答复的数量作为一个变量，并做一个小功能来处理它。但是必须有一个更简单的方法。我尝试使用：css中的悬停事件改变标签的内容（与css属性内容），但没有运气。
Because the number of replies varies for each comment, I cannot do a simple mouseover/mouseout script. One way to go around it would be to pass the number of replies as a variable, and make a small function to take care of it. But there must be a simpler way. I tried using the :hover thing in css to change the content of the tag (with the css property content), but no luck yet.
任何帮助，谢谢，谢谢！
Any help appreciated, thanks!
推荐答案
是的，您可以使用CSS content 。要在正常文本和Reply！之间切换，请将正常文本放在 span 中，并在悬停时隐藏。
Yes, you can use CSS content. To switch between the normal text and "Reply!", put the normal text in a span and hide that when hovering.
HTML：
<button><span>3 replies</span></button>
CSS：
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
jsFiddle：
编辑：这项功能适用于IE8，但不支援其相容模式，所以我认为IE7是out。这是一个问题吗？
this works in IE8, but not in its compatibility mode, so I assume IE7 is out. Would that be a problem?
这篇关于在悬停时更改文字，然后返回上一个文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
