title: Changing Background Color Using JQuery on Hover
body: <p>I'm currently coding and programming a website using Ruby on Rails but having some issues with a fairly basic element within the page. Basically, my backend system will contain a color that will change each month, that color is then pulled and used throughout the website for multiple elements. This is one of those elements...</p>
  
  <p>I have a div with an image inside that will soon be a link. I want to use JS or JQuery to make this element change it's background color on hover. I know it's simple but, for some reason, I can't figure this out. I'll include a jsfiddle of the entire setup:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="contribute_buttons"&gt;
      &lt;img src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.contribute_buttons {
      width: 300px;
      height: 39px;
      float: left;
      background-color: #393839;
      margin-top: 5px;
      margin-bottom: 15px;
  }
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$(document).ready(function() {
      var colorOrig=$(".contribute_buttons").css('background');
      $(".contribute_buttons").hover(
      function() {
          //mouse over
          $(this).css('background', '#AAEE00')
      }, function() {
          //mouse out
          $(this).css('background', colorOrig)
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/EQeMs/" rel="nofollow">http://jsfiddle.net/EQeMs/</a></p>
  
  <p>Thanks in advance for the help!</p>