Javascript jQuery幻灯片html元素

我正在制作一个基本的

div

，用于沿着网页左侧垂直运行的社交导航栏

我试图让每个

div

向右滑动到

宽度：64px当您将鼠标悬停在其上时，并在鼠标离开时返回到正常宽度

        <div class="social-buttons">
            <div class="social-btn"><b>f</b></div>
            <div class="social-btn"><b>G+</b></div>
            <div class="social-btn"><b>T</b></div>
            <div class="social-btn"><b>E+</b></div>
        </div><!-- end of social-buttons -->

.social-btn {
    display: block;
    border-radius: 0px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    background: #206999;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 48px;
    height: 48px;
    text-decoration: none;
}


F
G+
T
E+
.社会btn{
显示：块；
边界半径：0px；
字体系列：Arial；
颜色：#ffffff；
字体大小：16px；
背景:#206999；
文本对齐：居中；
填充顶部：16px；
填充底部：16px；
宽度：48px；
高度：48px；
文字装饰：无；
}
像这样在CSS上添加悬停元素

.social-btn {
    display: block;
    border-radius: 0px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    background: #206999;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    width: 48px;
    height: 48px;
    text-decoration: none;
}
.social-btn:hover {
 width: 64px;
}

您是否希望像这样使用JQuery设置宽度动画

200
参数控制动画运行的时间（以毫秒为单位），因此您可以更改它以使其更快或更慢地滑出。
将此添加到CSS中：

  .social-btn:hover {
width: 64px;
transition-property: width;
transition-duration: 1s;
}

  .social-btn {
transition-property: width;
transition-duration: 1s;
}

  .social-btn:hover {
width: 64px;
transition-property: width;
transition-duration: 1s;
}

  .social-btn {
transition-property: width;
transition-duration: 1s;
}