Я пытаюсь отредактировать ссылку со значком, чтобы исчезнуть между цветами. Я использую: раньше для фонового изображения, которое является спрайтом, потому что я не мог понять, как изменить цвет значка, используя только css, когда это всего лишь файл png.fade between icon sprite image with text
Я нашел этот пост, который может быть ответом (CSS3 - Fade between 'background-position' of a sprite image) и попытался изменить его к моим потребностям, но это не работает ...
Вот код и codepen демо в действии (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button"><a href="#">Button</a></div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
Как я могу это исправить, так что она будет исчезать от одного цвета к другому ...
* Update * С некоторой помощью от других (спасибо всем!), Я был в состоянии изменить код. Тем не менее, он не выстраивается в середину, как хотелось. Вот фактическая ссылка, которую я использую для веб-сайта. Первый отображаемый код был всего лишь примером того, как я могу заставить его работать. Во всяком случае, я, наконец, разделил значок и текст, используя диапазон, но теперь я пытаюсь связать их вместе, используя «+» в css, но он не работает. Вот codepen код: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><a href="#"><span></span>Free Consultation</a></div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
Как вы можете видеть из этого нового codepen кода, если вы наведите курсор мыши на значок, как значок и текст работы , но если вы наводите курсор на текст, работает только текст. Как это исправить?
Fade что? Значок? –
Ваша скрипка работает http://jsfiddle.net/DIRTY_SMITH/7oebee2m/8/ что не работает? –
исчезновение значка не работает. Я хочу, чтобы он менял цвета в изображении спрайта. Другое сообщение, которое я отправил, предназначалось для спрайта значков, который успешно менял цвета, но проблема в том, что у него не было текста. Я пытался изменить его, чтобы иметь текст. –