title: How to make div states changing dynamically by JQuery?
body: <p>I have a div working as a button similar to the Youtube "Subscribe" button. There are 3 classes on CSS working as states and styles: .unactive (is not subscribed), active (subscribed) and .remove (when the mouse is over on subscribed).</p>
  
  <p>Per example, when the button is '.unactive and mouse is over, add the class '.active'. Then when the mouse outs, it backs again to '.unactive'. If I click, its change to '.active' (and change the text inside to 'Subscribed'. And much more...</p>
  
  <p>But when I add the class '.unactive' and remove '.active' dinamically, I can't identify/select the div again to remove the '.active' and back again to '.unactive'.</p>
  
  <pre><code>    $('.btn-circle.unactive').mouseover(function(){
      $(this).addClass('active').removeClass('unactive');
    });
    $('.btn-circle.active').mouseout(function(){
      $(this).addClass('unactive').removeClass('active');
    });
  </code></pre>
  
  <p>What is the best way to make it?</p>