如何使用圖像精靈懸停一個跨度元素

我想要使用圖像精靈進行懸停操作，但我一直在研究它一個小時，並且無法正確完成。 span元素video-play-q-right以sprite爲背景。如何使用圖像精靈懸停一個跨度元素

這裏是我的精靈：

enter image description here

這裏的div的截圖：

enter image description here

下面是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; 
}

來源

2012-09-26 novicePrgrmr

我可以看到你的精靈？ – Giona

@GionaF編輯問題與圖像 – novicePrgrmr

爲什麼a.video-play-q-right:hover span？

與視頻播放q對課程沒有聯繫。試着用a:hover .video-play-q-right

a.my-class:hover span的意思是「我的類類的鏈接（a元素）含有一種span」來代替它。

因此，將針對這一點：

<a href="..." class="my-class"><span>Some text</span></a>

但不是這樣的：

<a href="..."><span class="my-class">Some text</span></a>

來源

2012-09-26 12:51:45 Giona

聖shiz非常感謝你。我是一個自學的網頁開發人員，所以我認爲我需要重新學習CSS類，等等...... – novicePrgrmr

;-)不客氣！本書對於以CSS開頭的人來說非常棒：http://shop.oreilly.com/product/9781565926226.do – Giona

那麼，我和你有什麼區別？ – novicePrgrmr

如何使用圖像精靈懸停一個跨度元素

回答

相關問題