如何使用HTML/CSS精靈的圖像和與jQuery

Question

我想用這種方式切換變化：

CSS

#sprite2 { 
    background: url(../images/csg_sprite.png) no-repeat top left; 
} 

.collapse_down{ background-position: 0 0; width: 16px; height: 16px; } 
.collapse_up{ background-position: 0 -66px; width: 16px; height: 16px; } 

HTML

<div id="sprite2"><span id="splink1" class="collapse_down">Defaults</span> 

CHANGE by jQuery

$('#splink1').attr("class", 'collapse_up'); 

我面臨的問題是圖像適用於div = sprite2，而不適用於我想要的範圍。

如何解決在文本左側顯示精靈的問題，以及何時切換精靈以更改圖像。

Answer 1

.sprite2 { 
    background: url(../images/csg_sprite.png) no-repeat top left; 
    display:inline-block; 
} 

<div id="splink1" class="sprite2 collapse_down"></div>Defaults 

背景位置屬性僅適用於包含添加背景圖像的id或class。

Answer 2

倒也乾脆：

#sprite2 { 
    background: url(../images/csg_sprite.png) no-repeat top left; 
} 

這樣：：

從此改變你的CSS

#sprite2 span { 
    background: url(../images/csg_sprite.png) no-repeat top left; 
}