如何在 html/css 中使用 sprite 图像并使用 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

很简单：

将 CSS 从这样：更改

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

为这样：

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