Javascript Jquery-bind/unbind悬停脚本，一小段代码，不知道该做什么

我已经创建了DIV.cb-toggle，当用户悬停在这个DIV上时，它将动画设置为橙色，当他们悬停在这个DIV之外时，它将动画设置为灰色，当用户单击这个DIV时，它将动画设置为蓝色，告诉用户它已被选中。因此，当它未被选中时，它具有mouseenter mouseleave动画，但当它被选中时，我希望解除mouseenter mouseleave的绑定，我不希望悬停事件在被选中时工作，仅当它未被选中时。做我想做的事情最好的方法是什么？我想出了下面的代码，但我很确定这是一个可怕的方法，我不知道该怎么做。非常感谢你的帮助

我的代码：

$('.cb-toggle').toggle(function() { 
      $(this).animate({"background":"blue", "color":"#fff;"});      
      $(".cb-toggle").unbind("click.myfadee");
   }, function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
      $('.cb-toggle').trigger('mouseenter');
   });
});

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

我称之为绑定：

$('.cb-toggle').toggle(function() { 
      $(this).animate({"background":"blue", "color":"#fff;"});      
      $(".cb-toggle").unbind("click.myfadee");
   }, function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
      $('.cb-toggle').trigger('mouseenter');
   });
});

$(".cb-toggle").bind("click.myfadee", function(){
      $(".cb-toggle").mouseenter(function() {
      $(this).animate({"background":"orange", "color":"#fff;"});
   }).mouseleave(function() {
      $(this).animate({"background":"gray", "color":"#fff;"});
   });
});

---

我需要保留背景色动画，并且我没有使用jquery UI，因此我无法在类之间设置动画。

你知道，使用一点CSS，这很容易实现

CSS

HTML

这只是一个例子，您可以扩展它来制作动画。你可能也想要这个

---

哇，老兄，你真是太棒了。而JSFIDLE则是真正的岩石。

$('.cb-toggle').click(function() {
   $(this).toggleClass('selected');
});​