7

目前我有这个，当鼠标悬停在容器 DIV 上时，一个小 DIV 从容器 DIV 的顶部滑入到中心；但是在鼠标移出时，它会滑回原来的位置。我想做的是让 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;
}
4

1 回答 1

5

就在每个人都确信它不能仅使用 css 时：

http://jsfiddle.net/Xkee9/36/

我为 mouseenter 使用了动画，为 mouseleave 使用了过渡

编辑：添加了 Firefox 修复

编辑：解释：（
我总是使用-webkit- -prefixes，只是为了在Chrome和Safari中解释它，Firefox使用-moz- -prefix，opera -o- - 前缀）

当什么都没有发生时：
块在 div.blocks ( ) 的底部，top:80px;不透明度为 0，也没有动画运行

悬停时：
块在没有过渡的情况下瞬间移动到顶部（参见：）-webkit-transition: none;，因为那时动画down-1正在运行。该动画在 0.25 秒内将块从 移动top:0到top:40px;。动画结束后，该块保持不变，top:40px;因为那是我在.blocks:hover .blocks_title.

鼠标移动时：
不再有动画运行，但块在 0.25 秒内从top:40px到移动，top:80px;因为-webkit-transition: all .25s;

于 2012-08-30T16:29:23.847 回答