我不知道如何制作简单的幻灯片效果。
简单的动画是当“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 就可以完成这项工作,但不幸的是,我对此一无所知。有人可以帮我编码吗?
最佳答案
您不需要 JavaScript,只需将鼠标悬停在父元素上时更改元素的位置即可。然后在 .excerpt
元素上添加一些过渡属性。
.excerpt {
left:-400px;
position:relative;
transition:all 2s;
-webkit-transition:all 2s;
}
.item:hover .excerpt {
left:0px;
}
或者,如果您希望在悬停在前一个 h1
元素上时发生过渡:
h1:hover + .excerpt {
left:0px;
}
关于javascript - 文本悬停时的滑动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22273238/