1

私は次のようなものを持っています：

<div class="one-third">
    <div class="inside">
        <h4><strong>How much can you save?</strong></h4>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
    </div>
    <div class="caption">caption here</div>
</div>

ホバー時に下にあるキャプション（divキャプション）を下からスライドさせ、ホバーしないときは下にスライドできるようにしたい。私はあちこちからいくつかの情報源を見てきましたが、それを正しく理解できないようです。この場合のメインコンテナ（3分の1）のサイズが変更されないことも重要です。キャプションはその中にあるはずです。どうすればこれを達成できますか？

4

2 に答える 2

1

デモ—このようなものですか？

CSS3 transition-duration（W3Schools）を使用してアニメーションを作成します。

アップデート：

デモ—トースター効果をお探しですか？

アップデート2：

デモ.animate()—代わりにjQueryを使用してアニメーション化

于 2012-11-12T02:51:20.583 に答える
0

これが私が最終的に得たものです。それは私が必要としたすべてをカバーしています...ロールオーバー時にトーストが下部に表示され、ロールオーバーするとdiv全体がリンクになり、リンクを含めることもできます。「アニメーション」はFFでのみ機能しますが、divが丸みを帯びた角を使用しているため、意図的にこれを行いました...何らかの理由でトーストはオーバーフローに従わないため、角が丸くなりません。

        <div class="one-third">
            <div class="inside">
                <a href="#"></a>
                <h4><strong>How much can you save?</strong></h4>
                <p>testing</p>
                <p>testing</p>
                <p><a class="link" href="#">testing</a></p>
                <p>testing</p>
                <span class="toast">Learn more about one</span>
            </div>
        </div>

css：

.one-third{
border:1px solid #d8d8d8;
margin:0 9px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background:#ffffff;
text-align:center;
position:relative;
overflow:hidden;
cursor: pointer;

}

.one-third:hover{ 
background: #eeeeee;
}

.one-third .inside{
padding:10px;
}

.one-third a{ /*entire div link*/
position:absolute; 
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
}

.one-third a.link { /*links on top of box*/
position:relative;
z-index:2;
}

.one-third .inside .toast {
background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
display: block;
position: absolute;
left: 0;
width: 100%;
bottom: -30px;
line-height:30px;
color: #fff;
font-size:14px;
text-align: center;
transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
bottom: 0;
}
于 2012-11-12T22:45:56.950 に答える