javascript - 文本悬停时的滑动效果

Question

我不知道如何制作简单的幻灯片效果。

简单的动画是当“The wordpress blog post Title”处于悬停状态时，“The Wordpress blog post excerpt”会从左向右滑动。

你可以在我的 js fiddle 中看到我的完整代码

http://jsfiddle.net/Kareen/emP65/3/

    <div class="item">
    <div class="blockdiag">
        <div class="blockradial">
            <h1>The wordpress blog post Title</h1>
            <div class="excerpt">
                The Wordpress blog post excerpt
            </div>
        </div>
    </div>
</div>

一个简单的 javascript 就可以完成这项工作，但不幸的是，我对此一无所知。有人可以帮我编码吗？

Answer 1

您不需要 JavaScript，只需将鼠标悬停在父元素上时更改元素的位置即可。然后在 .excerpt 元素上添加一些过渡属性。

UPDATED EXAMPLE HERE

.excerpt {
    left:-400px;
    position:relative;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.item:hover .excerpt {
    left:0px;
}

或者，如果您希望在悬停在前一个 h1 元素上时发生过渡:

EXAMPLE HERE

h1:hover + .excerpt {
    left:0px;
}