Я нашел решение, которое сработало для меня ...
Если у вас есть элемент списка (или div), содержащий только ссылку, и скажем, это для социальных ссылок на вашей странице на facebook, twitter и т. Д. и вы используете изображение спрайта, вы можете сделать это:
<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: hover» и установить для нее значение 1.
#facebook a:hover {
opacity:1;
}
Добавьте атрибуты перехода непрозрачности для каждого браузера в «a» и «a: hover», чтобы окончательный 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 ), поэтому ваше решение не соответствует стандарту.