我的精靈如何響應？

我得到了一個精靈圖片，這是一個麪包屑菜單。當鼠標懸停在菜單的元素上時，我想改變這個精靈的y位置。是沒有問題的具有固定寬度的網站做到這一點，但我不能一個負責任的一個解決此...我的精靈如何響應？

下面是現場版：http://jsfiddle.net/RtqkD/ 和我的CSS代碼：

.services { 
    height: 64px; 
    width: auto; 
    background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0; 
    background-size: 100%; 
} 
.services #Et1 { 
    margin-left: 60px; 
} 
.services #Et1, .services #Et2, .services #Et3, .services #Et4 { 
    height: 65px; 
} 
.services li { 
    float: left; 
    width: 210px; 
    position: relative; 
    background: none; 
} 
.services li a { 
    display: block; 
    padding: 8px 7px 8px 7px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 
} 
.services li:first-child a { 
    padding-left: 10px; 
}

任何提示？

編輯的@Sven評論我在這裏做了我的問題的更完整的現場版本後的CSS，Java腳本HTMLand：http://jsfiddle.net/RtqkD/2/

來源

2013-07-30 Xavier

對不起，但代碼的和平顯示什麼。你必須告訴我們什麼對你有用，以及你想要什麼，然後什麼不適合你，以及你的問題在哪裏。 –

可能這會給你一些指導：https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images – Cherniv

你能描述你想在不同分辨率下使用的精靈的哪部分？ – mitch

權，讓我們開始與你那拼合方式的事實是完全不必要的。我明白了爲什麼，但通過一些謹慎的編碼，它可以得到解決。

使用:before僞元素，我在每個項目後創建了三角形。現在每個項目使用CSS而不是jQuery（很整潔）反應到錨點上的懸停。瀏覽器支持不會歸結爲IE7，但大多數情況下都不支持。

這裏的小提琴：http://jsfiddle.net/robsterlini/RtqkD/5/（編輯排序的填充問題http://jsfiddle.net/robsterlini/RtqkD/6/）

，這裏是使用的元素：arrow sprite，background sprite（如果你想成爲真正的緊張與精靈，你甚至可以精靈他們在一起，只是要小心，你怎麼做它

花了我一點時間弄清楚，所以如果你需要任何解釋，然後給我一個喊:)希望幫助！

來源

2013-07-31 08:30:39

太好了，它真的很棒。我要在我的項目中嘗試這個:) – Xavier

沒有probs隊友。如果它解決了這個問題，您可以將其標記爲答案。 ;） –

偉大的作品，thx！ – Xavier

我的精靈如何響應？

回答

相關問題