javascript - jQuery 悬停不悬停

Question

我的问题是我有一个按钮，当用户将鼠标悬停在其上时，它应该更改文本..当他们将鼠标悬停时，它应该返回到之前的状态。

这是我的 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' />");
    });
});

它的作用应该类似于 Twitter 的关注/取消关注按钮。谁能给我一些启发吗？

编辑:一切正常，除了它不会“悬停”

Answer 1

为什么不做类似的事情(未经测试):

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