javascript - 如何通过动画增加框的宽度？

Question

我想为宽度从 20px 到 80px 的框设置动画，但仅限于框的右侧。所以这意味着当我将鼠标悬停在右侧时，右侧会增加 60px 的宽度并带有动画。它的 jquery 代码是什么？

Answer 1

仅使用 CSS3 和 HTML。无需使用 jquery。

.box {
        transition: 0.2s;
        width: 20px;
        height: 100px;
        background-color:#0066CC;
        position : absolute;
        left: 50px;
        top: 50px;
    }
    
    .box:hover {
        width: 80px;
        height: 100px;
        left: 50px;
        top: 50px;
    }

<div class="box"></div>