Как использовать спрайт изображения в 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>

ИЗМЕНЕНИЕ jQuery

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

Проблема, с которой я сталкиваюсь, состоит в том, что изображение применяется для div = sprite2, а не для диапазона, который я хочу.

Как исправить так, чтобы слева от текста отображался спрайт, а когда я переключаю его, чтобы изменить изображение на вверх.

Answer 1

Довольно просто:

Измените свой CSS из этого:

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

к этому:

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

Answer 2

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

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

свойство положения фона применяется только тогда, когда к нему добавлен идентификатор или класс, который включает в себя фоновое изображение.