javascript - Change text on hover, then return to the previous text

Question

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".

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!

Answer 1

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:

http://jsfiddle.net/4xcw7/2/

Edit: this works in IE8, but not in its compatibility mode, so I assume IE7 is out. Would that be a problem?