淡入图标精灵图像与文本之间

我试图编辑一个链接与图标之间的颜色褪色。我使用:之前的背景图像，这是一个精灵，因为我不知道如何改变只有css图标的颜色，当它只有png文件。

我发现这篇文章可能是一个答案(CSS3 - Fade between 'background-position'(一个雪碧图像)，并试图修改它，以满足我的需要，但它不工作…

下面是代码和codependency演示(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 *在其他人的帮助下(谢谢大家!)，我能够编辑代码。然而，它没有像我想要的那样在中间排列。这是我在一个网站上使用的实际链接。显示的第一个代码只是一个示例，以了解如何使其工作。无论如何，我最终通过使用span将图标和文本分开，但现在我试图通过在css中使用"+"将它们绑在一起，但它不起作用。下面是代码: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;
}

从这个新的代码中可以看到，如果您将鼠标悬停在图标上，图标和文本都可以工作，但是如果您将鼠标悬停在文本上，则只有文本可以工作。我怎么修理它?

您必须在不同的DOM元素上应用不同的图像样式，一旦它是锚标记，第二个是span(在我的示例中)，然后切换不同位置背景的不透明度。CodePen链接

.button {
	display: inline-block;
	position: relative;
	text-indent: 30px;
	width: 36px;
	height: 30px;
	background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
  text-decoration: none;
  font-size: 1.5em;
  transition: color 0.4s ease;
  line-height:1.5em;
}
.button:hover{
  color:#f68e07;
}
.button span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
	background-position: 0 -29px;
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}
.button:hover span {
	opacity: 1;
}

<a href="#" class="button">Button<span></span></a>

要更改颜色，您可以将CSS过渡与-webkit-filter合并，当发生某些事情时，您将调用您选择的-webkit-filter。例如:

            img {
                        -webkit-filter:grayscale(0%);
                        transition: -webkit-filter .3s linear;
                    }
                    img:hover 
                    {
                        -webkit-filter:grayscale(75%);
                    }

您已经为#button a:hover:before { ... }声明了opacity: 0;，这就是为什么它在您的codependent演示中不起作用

我明白了!谢谢大家的帮助!我能让它工作!!

这里是工作代码:http://codepen.io/kikibres/pen/LVKQxE

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-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 span {
    position: relative;
  display: inline-block;
    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: "";
  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:hover a {
color: #f68e07;
}
#button:hover a span:before {
    opacity: 1;
}

相关内容

最新更新

热门标签：