雪碧悬停效应从图像到图像的滑动

Question

我有一个精灵形象的社交图标，悬停效果是滑翔时的。

我不希望它发生变化，我希望它的作用就像我使用常规图像时，当将图像悬停时图像被更改时，我还想向它添加CSS3转换。

这是网站：站点

​

​

/*Social Icons*/
#social_icons { 
    width: 18%;
    height: 37px; 
    display: inline; 
    position: absolute; 
    bottom: 0; 
    left: 185px;
}

.social-roll {
    height: 40px; 
    width: 42px; 
    margin: -3px; 
    display: inline-block; 
    -webkit-transition:  all 0.9s ease-in-out; 
    -moz-transition: all 0.9s ease-in-out; 
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out; }

.ico-facebook, .ico-facebook-hover, .ico-googlep, .ico-googlep-hover, .ico-linkedin, 
.ico-linkedin-hover, .ico-message, .ico-p, .ico-p-hover, .ico-twitter, 
.ico-twitter-hover{ 
    display: inline-block; 
    background: url('../images/icons/social.png') no-repeat; 
    overflow: hidden; }

.ico-facebook {
    background-position: -3px -0px; 
    width: 40px; 
    height: 40px;
}

.ico-facebook:hover {
    background-position: -46px -0px;
    width: 40px; 
    height: 40px;
}

.ico-googlep {
    background-position: -89px -0px;
    width: 40px;
    height: 40px;
}

.ico-googlep:hover {
    background-position: -3px -43px;
    width: 40px;
    height: 40px;
}

.ico-linkedin {
    background-position: -46px -43px;
    width: 40px;
    height: 40px;
}

.ico-linkedin:hover {
    background-position: -89px -43px;
    width: 40px;
    height: 40px;
}

.ico-message {
    background-position: -3px -86px;
    width: 40px;
    height: 40px;
}

.ico-p {
    background-position: -46px -86px;
    width: 40px;
    height: 40px;
}

.ico-p:hover {
    background-position: -89px -86px;
    width: 40px;
    height: 40px;
}

.ico-twitter {
    background-position: -3px -129px;
    width: 40px;
    height: 40px;
}

.ico-twitter:hover {
    background-position: -46px -129px;
    width: 40px;
    height: 40px;
}

1

Answer 1

只需移除过渡效果：

.social-roll {
    height: 40px;
    width: 42px;
    margin: -3px;
    display: inline-block;
    /* transition: all 0.9s ease-in-out 0s; */
}

注意:您需要指定您想要的过渡类型。

Answer 2

您的规则集定义如下

.社交圈{

display: inline-block;
height: 40px;
margin: -3px;
transition: all 0.9s ease-in-out 0s;
width: 42px;

}

从上面的规则中移除转换属性，或者在下面的规则集中添加一个新属性。

..ico facebook，..ico facebook-悬浮，..ico googlep，..ico googlep-悬停，..ico linkedin，..ico linkedin-悬停，..ico消息，..ico p，..ico p-悬浮，..ico twitter，..ico twitter-悬浮{

过渡:无；

}