图标悬停文字效果答案

【问题标题】：Icon Hover Text Effect图标悬停文字效果
【发布时间】：2015-06-19 08:19:39
【问题描述】：

如何在这种社交悬停效果中做出更好的效果。任何想法？

JSFIDDLE

例如这样：http://themes.semicolonweb.com/html/canvas/demo-travel.php

【问题讨论】：

以什么方式更好？你到底想解决什么问题？
当它显示我想要的“线性或任何”效果的文本时
jsfiddle.net/6whobL3c
请在您的问题中添加相关的“MCVE”代码。不要试图通过假装您的链接是代码来规避规则：它不是。

标签： css hover icons social

【解决方案1】：

为了在宽度/高度上使用 css 过渡，您必须使用以像素为单位的静态值，例如（不是 auto）。

它应该是这样的：

.social li a {
    width: 30px;
    line-height: 50px;
    height: 40px;
    float: left;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    background:transparent;
    transition: width .5s, background .5s;
    padding:5px;
}
.social li.rss a {
    color: #F88F16;
}
.social li.facebook a {
    color: #3B5998;
}
.social li.twitter a {
    color: #3CF;
}
.social li.googleplus a {
    color: #BD3518;
}
.social li.facebook:hover a {
    width: 115px;
    background:#999;
}
.social li.twitter:hover a {
    width: 80px;
    background:#999;
}
.social li.googleplus:hover a {
    width: 105px;
    background:#999;
}

Live demo

P.S.：我清除了你的 CSS ;)

【讨论】：

欢迎，很高兴为您提供帮助:)