title: jQuery making a class to change background one at a time
body: <p>I would like to background-color to change on hover for 6 different divs with the same class attached. How can I change the background-color on each individual div as I mouse in and out?</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-5 col-md-offset-1"&gt;
      &lt;div class="thumbnail"&gt;
          &lt;img src="" class="img-responsive" alt="" /&gt;
     &lt;/div&gt;
     &lt;a href="#"&gt;&lt;p id="caption"&gt;Thumbnail&lt;/p&gt;&lt;/a&gt;
     &lt;p id="date"&gt;Feburary 02, 2014&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(There are six of these.)</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>$(document).ready(function(){
       $('.thumbnail').mouseover(function(){
      $('.thumbnail').css("background-color","#a84444")
  });
  
  $('.thumbnail').mouseout(function(){
      $('.thumbnail').css('background-color', '#EC5657')
  });
  });
  </code></pre>
  
  <p>Can anyone help me?</p>
  
  <p>Webpage is: <a href="http://ljferris.com/portfolio_index/" rel="nofollow">http://ljferris.com/portfolio_index/</a></p>