title: Controlling hover area and CSS image sprites
body: <p>Using a CSS image sprite, I'm creating an 'interactive' image where hovering over certain areas changes part of the image. All works fine but struggling with being able to control the area of the hover once you are over the hover area.</p>
  
  <p>For example, lets say the main area is 400x400 pixels and the hover area is 100x100 from the top left corner. As you move into the hover area, the 'new' image to display is 200x200. This appears but then this 'new' 200x200 image becomes active; I can then move anywhere within this new image (to say 150x150) and the hover image is still there even though now I am out of the 100x100 original hover area. Is there any way to restrain this so that the active area is always 100x100 even with the 200x200 hovered image displayed?</p>
  
  <p>My (cut-down) CSS (areaTest.css) is:</p>
  
  <pre><code>#bigArea {
      width: 400px;
      height: 400px;
      background: url(areaImage.jpg) no-repeat;
      margin: 10px auto; padding: 0;
      position: relative;
  }
  
  #bigArea li {
      margin: 0;
      padding: 0;
      list-style: none;
      display: block;
      position: absolute;
  }
  #bigArea a {
      display: block;
      text-indent: -9999px;
      text-decoration: none;
  }
  
  #littleArea {
      width: 100px;
      height: 100px;
  }
  #littleArea a {
      width: 100px;
      height: 100px;
  }
  #littleArea a:hover {
      width: 200px;
      height: 200px;
      background: url(areaImage.jpg) 0px -410px no-repeat;
  }
  </code></pre>
  
  <p>and my HTML is:</p>
  
  <pre><code>&lt;link href="areaTest.css" rel="stylesheet" type="text/css"&gt;
  &lt;div&gt;
      &lt;ul id="bigArea"&gt;
          &lt;li id="littleArea"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks, Jam</p>