title: 3 button state - normal, rollover (on hover), active (on click) with jquery?
body: <p>I'm using the following code to get my buttons to change to their rollover state when hovered over.</p>
  
  <pre><code>$('.button').hover(function(){
  $(this).css('background-position', '0 -23px');
  }, function(){
  $(this).css('background-position', '0 0px');
  });
  </code></pre>
  
  <p>with the .button class applied to all the button divs, using the background-position function where all the background images have all three states in the same image - at '0 0px' show the normal state, at '0 -23px' shows the rollover state, and at '0 -46px' shows the active state.</p>
  
  <p>I'm trying to figure out how to get my buttons to show their active states when they are clicked, while having all other .button buttons go back to their normal states.  I've tried the following code which changes the buttons to their active states, but when the mouse is moved off the buttons they go back to their normal states.</p>
  
  <pre><code>$('.button').click(function(){
  $(this).css('background-position', '0 -46px');
  });
  </code></pre>
  
  <p>Thanks!</p>