title: jquery change background image on hover
body: <p>I have several divs that I want to generate css background images for.  They will change on hover.  Yes, I'm aware that I could easily do this in css, but it needs to be done in jquery.</p>
  
  <p>Code:</p>
  
  <pre><code>$(document).ready(function() {
      $('.hoverBox').css('background', 'url(img/box' + id + '.jpg)')  
      $('.hoverBox').hover(function(){
      $(this).css('background', 'url(img/box' + this.id + '_back.jpg)')                      
      },
      function(){
      $(this).css('background', 'url(img/box' + this.id + '.jpg)')                       
      });
  });
  </code></pre>
  
  <p>HTML is like this:</p>
  
  <pre><code>&lt;div class="hoverBox" id="benefits"&gt;
  content&lt;/div&gt;
  &lt;div class="hoverBox" id="installation"&gt;
  content&lt;/div&gt;
  &lt;div class="hoverBox" id="shoponline"&gt;
  content&lt;/div&gt;
  </code></pre>
  
  <p>This should be so easy, but I can't seem to make it work.</p>
  
  <p>Assistance would be much appreciated!  TIA.</p>