Как переключиться на спрайт изображения при сохранении существующих переходов

Question

У меня есть сайт, на котором я в настоящее время не использую спрайты для хранения изображений. Вместо этого я напрямую ссылаюсь на отдельные изображения. Теперь я хочу поместить все статические изображения в один спрайт для оптимизации моего сайта.

В настоящее время я использую эффект CSS transition: background-image 0.5s; для зависших изображений. Это приводит к эффекту «затухающего» эффекта, когда мышь колеблется.

JSFiddle показаны два примера, когда эти выцветания эффект перехода происходит:http://jsfiddle.net/VsVpU/

Проблема заключается в том, что если я использую спрайты, background-image должен измениться на background-position, и это изменяет эффект от предыдущего затухающего эффекта, к вертикальный/горизонтальный эффект скольжения.

Как переключиться на спрайты, сохранив существующий эффект перехода затухания, и НЕ меняя исходный код HTML?

Я не хочу менять HTML, потому что это приведет к МНОГО ИЗМЕНЕНИЙ. Можно ли это сделать, используя только CSS? Или с помощью CSS + jQuery/JavaScript? .. Хотя я хотел бы избежать JavaScript тоже здесь, если это возможно ..

EDIT:

Решение должно быть кросс-браузерный тоже ..

Answer 1

Вам нужно создать 2 спрайтов изображения, один для нормального состояния и другой для состояния зависания.

Координаты того или иного элемента фона должны быть одинаковыми на обоих изображениях.

Тогда переход от нормального состояния парить состояния осуществляется в URL изображения, но не в координатах