如何使用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; 
}