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!

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?

I think this would be a straightforward way to go for it. Use two span inside your button, one with content 'x replies', one with content 'Reply!'. Using CSS and :hover, you just switch which span is shown on hover.

button .comment {
  display: none;
}

button:hover .replies {
  display: none;
}

button:hover .comment {
  display: inline;
}

<button>
    <span class="replies">5 Replies</span>
    <span class="comment">Reply!</span>
</button>

This works just fine in about everything, as it uses very basic things to achieve an equally basic goal.

I would use a combination of jQuery .hover() and jQuery .data():

http://jsfiddle.net/5W4Bd/

HTML:

<div id="myDiv">default text</div>

javascript:

$('#myDiv')
    .data('textToggle', 5)
    .hover(function (e) {
        var that = $(this);

        // get the text from data attribute
        var textToSet = that.data('textToggle');

        // save the current text so it can be reverted
        that.data('textToggle', that.text());

        // set the new text
        that.text(textToSet);
    }, function (e) {
        var that = $(this);

        // get the text from data attribute
        var textToSet = that.data('textToggle');

        // save the current text so it can be reverted
        that.data('textToggle', that.text());

        // set the new text
        that.text(textToSet);
    });

edit: feel free to refactor the anonymous function used as the two callbacks to hover, since they are exactly the same :)

$('#button_id').hover(
    function(){
        $(this).text('Reply!');
    },
    function(){
        $.ajax({
            url: 'script.php',
            type: 'post',
            data: comment_id,
            success: function(num_replies){
                $('#button_id').text(num_replies + ' replies');
            }
        });
    }
);

I think you could use this kind of function, when you stop hovering, you feed the ajax call your comment id, and it returns the # of replies for that comment. You can decide how you want to store/retrieve your comment ID.

Another way to do it, is to create two spans with the button, and have classes for each span.

<button>
  <span class="replies">3 Replies</span>
  <span class="comments"></span>
<button>

Leave the second one empty, and in css, write:

button{ 
  //your decorative code here }

button:hover .replies{
   display: none; }

button:hover .comments:before{
   content:"Reply!"; }

This is similar to first answer, but that answer doesn't always work with a preprocessor like SASS, or LESS.

Change text on hover, then return to the previous text

Related

Recent Posts