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的后续/取消关注按钮。任何人都可以为我揭开一些光明吗？

编辑：一切工作正常，但它不会“unhover”

Answer 1

为什么不类似的东西（未经测试）：

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

Answer 2

你为什么不尝试做这样的事情？

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      $(this).removeClass('green').addClass('red').attr('value', 'Unfollow'); 
     }, 
     function() { 
      $(this).removeClass('red').addClass('green').attr('value', 'Follow'); 
    }); 
}); 

Answer 3

它不会因为事件没有被绑定，因为您已经替换了元素。

只要改变值和类来代替：

$("#followingbutton").hover (
    function() { 
     $(this).val('Unfollow').toggleClass('red green'); 
    }, 
    function() { 
     $(this).val('Following').toggleClass('red green'); 
}); 

示例 - http://jsfiddle.net/infernalbadger/ETVpK/1/

Answer 4

这是因为你删除具有事件侦听器，比具有类似元素

替换元素试试这个：

$(document).ready(function() { 
    $("#followingbutton").hover (
     function() { 
      this.value = 'Unfollow'; 
      this.className = 'button red'; 
     }, 
     function() { 
      this.value = 'Following'; 
      this.className = 'button green'; 
    }); 
});