hover not active when hovering over sprite image in IE9 - html

Question

Here is a toughie.
JSfiddle
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 span as a background image.
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.
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.
I created the images below to illustrate what is happening:
This is when you hover over the isotope hydrology image (which is what i want to happen)
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)
any help with this would be awesome.
Here is the html:
<div id="news-video" class="news-tab">
<div id="video-box-left">
<div class="video-img">
<span class="video-play-q-left">play</span><img src="resources-na/images/video-amano-scientific-forum.PNG" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1">
</div>
<div class="video-text">
<p><strong>Food for the Future - Meeting Challenges with Nuclear Applications - Statement to 2012 Scientific Forum</strong></p>
</div>
</div>
<div id="video-box-right">
<div class="video-img">
<img src="resources-na/images/video-isotope-hydrology.jpg" alt="Isotope Hydrology - The Fingerprints of Water" width="200" height="155" border="1"><span class="video-play-q-right">play</span>
</div>
<div class="video-text">
<p><strong>Isotope Hydrology - The Fingerprints of Water</strong></p>
</div>
</div>
Here is the css:
#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;
}

Answer 1

My DOCTYPE tag was forcing IE to go into "IE9 Compatibility View".
I changed the tag and it was fine.
Thanks for the help everyone.