title: How to add a diffrent background image to different div elements on hover?
body: <p>I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:</p>
  
  <pre><code>&lt;div class="contributor"&gt;
    Some great stuff here
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.</p>
  
  <pre><code>$(document).ready(function(){
    $('.contributor').mouseenter(function(){
        $(this).addClass('visible');
    });
    $('.contributor').mouseleave(function(){
      $(this).removeClass('visible');
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Here's the code for the 'visible' class:</p>
  
  <pre><code>.visible{
    background-image: url('../res/dev-1.png');
  }
  </code></pre>