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を使用し、オペラは-o- --prefixを使用します）

何も起こらない場合：
ブロックはdiv.blocks（top:80px;）の下部にあり、不透明度は0で、アニメーションも実行されていません。

ホバーすると、アニメーションが実行されているため
、ブロックは遷移なしで瞬時に一番上に移動します（:を参照）。そのアニメーションは、ブロックを.25秒でからに移動します。アニメーションの後、ブロックはそのままになります。これは、で追加したものだからです。-webkit-transition: none;down-1top:0top:40px;top:40px;.blocks:hover .blocks_title

mousleavingの場合：
アニメーションはもう実行されていませんが、ブロックは.25sでからtop:40pxに移動します。top:80px;-webkit-transition: all .25s;

于 2012-08-30T16:29:23.847 に答える