用于悬停效果的精灵从图像滑动到图像

Question

我在精灵图片中有一个社交图标，悬停时悬停效果会滑动。

我不想要它，我希望它像我使用常规图像一样，当悬停图像时图像被更改，我也想添加CSS3过渡到它。

这是网站：[网站] [1]

/*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

您的规则集定义如下

.social-roll {

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

}

要么从上面的规则中删除transition属性，要么在以下规则集中添加新属性

.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 {

过渡：无;

}