title: CSS: Making 'list-style-image's position on the image itself change upon hover
body: <p>I currently have the following CSS to change the list image on a webpage:</p>
  
  <pre><code>.footer-list  li
  {
  list-style-image:url('images/footer/arrow.png');
  padding-left:14px;
  }
  </code></pre>
  
  <p>The image is comprised of a hover/non-hover version, with the original on top and the hover version below it.</p>
  
  <p>I would like this list to begin by showing the top section (7x7px), then move to the bottom 7x7 section upon hover. I know how to do the hover part but not moving the section of the image being shown.</p>
  
  <p>Hope this makes sense</p>