title: JQuery add class functionality not working
body: <p>I am trying to have an element rather like the Twitter tweets area. The DIV should be a different colour on mouseover with a new position for the background image.</p>
  
  <p>Then when the user clicks the background image position should move again and the background colour should change only when the user is not on hover. I tried this but it will not work.</p>
  
  <p>JS --</p>
  
  <pre><code>function reviews(id) {
      $('#reviews .review').removeClass('ractive');
      $(id).addClass('ractive');
  }
  </code></pre>
  
  <p>CSS --</p>
  
  <pre><code>#reviews .review {
      font-family:"Lucida Grande", Arial, sans-serif;
      display:block;
      width:599px;
      padding-right:30px;
      background:url(images/ui/arrows.png) -60px -60px no-repeat;
  }
  #reviews .review:hover {
      background-position:605px 50px; 
      background-color:#E6F5F5;
      }
  #reviews .review .ractive {
      background-color:#E2E2E2;
      background-position:605px -100px; 
  }
  #reviews .review .ractive:hover {
      background-color:#E6F5F5;
      background-position:605px -100px; 
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="review" onclick="reviews(this);"&gt;Blah Blah Blah Blah&lt;/div&gt;
  </code></pre>
  
  <p>Any ideas what is wrong. The new class does not seam to be applied to the element.</p>
  
  <p>Marvellous</p>