我想将图像精灵用于悬停动作,但我已经研究了一个小时并且无法正确处理。span 元素video-play-q-right
将精灵作为其背景。
这是我的精灵:
这是div的屏幕截图:
这是html:
<div class="video-box">
<div class="video-img">
<a href="#" onclick="window.open('http://url.html','photoessay','scrollbars=no,resizable=yes,width=800,height=600')">
<img src="resources-na/images/video.jpg" width="200" height="155" border="1">
<span class="video-play-q-right">play</span></a>
</div>
<div class="video-text">
<p><strong> of Water</strong>.<br /> water's properties. (05:43 min)
<a href="#" onclick="window.open('http://url.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">... View</a></p>
</div>
</div>
这是CSS:
.video-box{
padding-right: 20px;
float: left;
width: 200px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 0 !important;
padding: 4px;
width: 200px;
height: 155px;
}
.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.video-play-q-right:hover span{
background-position: center bottom;
}