title: Increasing the hover area of an image for a sprite
body: <p><strong>UPDATE</strong>
  Here is a <a href="https://jsfiddle.net/mseifert/mgggf5vo/" rel="nofollow">jsFiddle</a> with the image and hover event.</p>
  
  <p>I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.</p>
  
  <p>I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?</p>
  
  <p>I do have a containing <code>a</code> tag. I am able to increase the clicking area of the buttons by padding the <code>a</code> tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.</p>
  
  <pre><code>img.prev{
      background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
      width: 30px;
      height: 60px;
  }
  
  img.prev:hover{
      background-position: 0px -60px;
  }
  
  img.next{
      background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
      width: 30px;
      height: 60px;
  }
  
  img.next:hover{
      background-position: -30px -60px;
  }
  </code></pre>