Question

My problem is that I have a button and when the user hovers their mouse over it, it should change text.. and when they hover out it should go back to how it was before.

Here’s my jQuery

$(document).ready(function() {
    $("#followingbutton").hover (
        function() {
            $(this).replaceWith("<input type='submit' value='Unfollow' id='followingbutton' class='button red' />");
        },
        function() {
            $(this).replaceWith("<input type='submit' value='Following' id='followingbutton' class='button green' />");
    });
});

It’s supposed to act like the twitter follow/unfollow button. Can anyone shed some light for me?

EDIT: Everything works fine, except it wont ‘unhover’

Answer 1

Why not something like that (untested):

$(document).ready(function() {
    $("#followingbutton").hover (
        function() {
            $(this).val('Unfollow')
                   .attr('class', 'button red');
        },
        function() {
            $(this).val('Following')
                   .attr('class', 'button green');
    });
});