javascript - jQuery 幻灯片 html 元素

Question

我正在为沿网页左侧垂直运行的社交导航栏制作一个基本的 div。

我试图让每个单独的 div 向右滑动到 width: 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;
}

Answer 1

将此添加到您的 CSS:

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

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