目前我有
this,当鼠标悬停在容器DIV上时,一个小DIV从容器DIV的顶部滑入中心;但是在mouSEOut上,它会滑回到它来自的地方.我想做的是让DIV从DIV的另一侧滑出,直接在它进入的对面.
这可能只使用CSS吗？ (我想用JQuery会更直接)
<div class="blocks">
<div class="blocks_title">
</div>
</div>
<div class="blocks">
<div class="blocks_title">
</div>
</div>
.blocks {
position: relative;
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px dotted #333;
overflow: hidden;
}
.blocks_title {
position: relative;
width: 20px;
height: 20px;
top: 0px;
left: 40px;
background: #333;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
.blocks:hover .blocks_title {
top: 40px;
opacity: 1;
}
解决方法
只有当每个人都确信它不会仅仅与css一起工作时：
我使用了一个用于mouseenter的动画和一个用于mouseleave的转换器
编辑：添加了firefox修复
编辑：说明：
(我总是使用-webkit- -prefixes,只是在Chrome和Safari中解释它,Firefox使用-moz- -prefix,opera -o- – 前缀)
什么都没发生：
该块位于div.blocks的底部(顶部：80px;),不透明度为0,也没有运行动画
悬停时：
块无瞬间移动到顶部而没有转换(参见：-webkit-transition：none;),因为动画down-1正在运行.该动画从顶部移动块：0到顶部：40px;在.25s.在动画之后,块保持在顶部：40px;因为这就是我在.blocks中添加的内容：hover .blocks_title.
当mousleaving：没有动画运行了,但是块从顶部移动：40px到顶部：80px;在.25s因为-webkit-transition：全.25s;
