文本悬停时滑动效果

Question

我无法弄清楚如何做一个简单的幻灯片效果。

简单的动画是“Wordpress博客文章摘录”这个词，当“wordpress博客帖子标题”这个词处于悬停状态时，将从左向右滑动。

你可以在我的js小提琴中看到我的完整代码

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;
}