title: hover not active when hovering over sprite image in IE9
body: <p>Here is a toughie.</p>
  
  <p><a href="http://jsfiddle.net/XvMpK/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p>I have a link that opens up a video player(see below). The isotope hydrology image is the links image, and the play button image is within a <code>span</code> as a background image.</p>
  
  <p><img src="https://i.stack.imgur.com/JGwwE.png" alt="enter image description here"></p>
  
  <p>I am using a css sprite so that when someone hovers over any part of the image, the play image will change to what is below.  </p>
  
  <p><img src="https://i.stack.imgur.com/ZmAsK.png" alt="enter image description here"></p>
  
  <p>This works fine in all browsers except IE. In IE9, when I hover over the the isotope hydrology image it changes color and is clickable(like the image above). But when I hover over the actual play button, it switches from the blue "active" play button(above) to the grey "inactive" play button (top image) and it is not clickable.</p>
  
  <p><strong>I created the images below to illustrate what is happening:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/TGik8.png" alt="enter image description here"></p>
  
  <p>This is when you hover over the isotope hydrology image (which is what i want to happen)</p>
  
  <p><img src="https://i.stack.imgur.com/agIE7.png" alt="enter image description here"></p>
  
  <p>Once I hover over the play button (which is a span background image), this is what it looks like.(the cursor becomes a text cursor and the css sprite changes back to the non-hover color) </p>
  
  <p>any help with this would be awesome.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="news-video" class="news-tab"&gt;
                          &lt;div id="video-box-left"&gt;
                              &lt;div class="video-img"&gt;
                                  &lt;a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')"&gt;&lt;span class="video-play-q-left"&gt;play&lt;/span&gt;&lt;img src="resources-na/images/video-amano-scientific-forum.PNG" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1"&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="video-text"&gt;
                                  &lt;p&gt;&lt;strong&gt;Food for the Future - Meeting Challenges with Nuclear Applications - Statement to 2012 Scientific Forum&lt;/strong&gt;&lt;a href="#" onclick="window.open('http://www-','photoessay','scrollbars=no,resizable=yes,width=850,height=722')"&gt;&lt;/a&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="video-box-right"&gt;
                              &lt;div class="video-img"&gt;
                                  &lt;a href="#" onclick="window.open('http://www-','photoessay','scrollbars=no,resizable=yes,width=800,height=600')"&gt;&lt;img src="resources-na/images/video-isotope-hydrology.jpg" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1"&gt;&lt;span class="video-play-q-right"&gt;play&lt;/span&gt;&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="video-text"&gt;
                                  &lt;p&gt;&lt;strong&gt;Isotope Hydrology - The Fingerprints of Water&lt;/strong&gt;&lt;a href="#" onclick="window.open('http://.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')"&gt;&lt;/a&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the css:</p>
  
  <pre><code>#news-video {
      color: #8A8A8A;
      font-size: 1.1em;
      line-height: 1.6667;
      padding-left: 0px;
  }
  
  #video-box-left{
      margin-left: 10px;
      margin-right: 20px;
      float: left;
      width: 210px;
  }
  #video-box-right{
      margin-right: 10px;
      float: left;
      width: 210px;
  }
  .video-img {
      background-color: #EEEEEE;
      border: 1px solid #DDDDDD;
      margin-bottom: 5px;
      padding: 4px;
      width: 200px;
      height: 155px;
  }
  
  .video-text {
  
  }
  
  .video-play-q-left {
      background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
      background-position: center top;
      height: 50px;
      position: absolute;
      text-indent: -9999em;
      width: 50px;
      left: 100px; 
      top: 127px;
  }
  .video-play-q-right {
      background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
      background-position: center top;
      height: 50px;
      position: absolute;
      text-indent: -9999em;
      width: 50px;
      left: 321px;
      top: 127px;
  }
  
  a:hover .video-play-q-right{
      background-position: center bottom;
  }
  
  a:hover .video-play-q-left{
      background-position: center bottom;
  }
  </code></pre>