title: How to change background image in hover?
body: <p>The image file which I'm working with is a <code>.png file</code> created out of two identical objects in different colors (blue/orange). <strong>The objects in the .png file are next to eachother.</strong> What I want to do is that the background image is set to the left part of the .png (blue) and in hover to the right part (orange) of the .png. I know how it works when the objects within the .png are under eachother 
  example :</p>
  
  <pre><code>.facebook_ico {
    background : transparent url('img/social-icons.png') bottom right no-repeat;
  }
  
  .facebook_ico:hover {
    background : transparent url('img/social-icons.png') top right no-repeat;
  }
  </code></pre>
  
  <ul>
  <li>but how does this work if the objects are next to each other?</li>
  </ul>
  
  <p>To avoid any misunderstanding, I'm looking for a way to use a background image which has multiple object <strong>next to eachother</strong> (in this case 2). Is that possible or do I need to have them <strong>under eachother</strong> to be able to change them in <code>hover</code>?</p>