Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change text on hover, then return to the previous text

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!

like image 451
Sophivorus Avatar asked Mar 28 '12 18:03

Sophivorus


People also ask

How do I change text on hovering?

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. button { width: 6em } button:hover span { display: none } button:hover:before { content: "Reply!" }

How do you change text on hover in react?

To show text when hovering over an element in React: Set the onMouseOver and onMouseOut props on the element. Track whether the user is hovering over the element in a state variable. Conditionally render the text based on the state variable.


1 Answers

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.

button {   width: 6em }  button:hover span {   display: none }  button:hover:before {   content: "Reply!" }
<button><span>3 replies</span></button>

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

like image 112
Mr Lister Avatar answered Oct 05 '22 18:10

Mr Lister