Я зрозумів рішення, яке працювало для мене ...
Якщо у вас є елемент списку (або div), що містить лише посилання, і скажімо, це стосується соціальних посилань на вашій сторінці до facebook, twitter, ect. і ви використовуєте спрайт-образ, ви можете це зробити:
<li id="facebook"><a href="facebook.com"></a></li>
Зробіть фон "li" своїм зображенням кнопки
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Потім перетворіть фонове зображення посилання в режим наведення кнопки. Також додайте до цього атрибут непрозорості та встановіть його на 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Тепер все, що вам потрібно, це "непрозорість" під "a: навести курсор" і встановити це на 1.
#facebook a:hover {
opacity:1;
}
Додайте атрибути переходу непрозорості для кожного браузера до "a" та "a: наведіть курсор", щоб кінцевий css виглядав приблизно так:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
Якщо я це правильно пояснив, це повинно дати вам кнопку зникаючого фонового зображення, сподівайтеся, що це допоможе принаймні!
background-image
не є анімаційною властивістю ( w3.org/TR/css3-transitions/#animatable-properties ), тому ваше рішення не відповідає стандартам.