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 标题），并在未悬停时滑出底部。我已经从这里和那里查看了一些来源，但似乎无法做到正确。在这种情况下，主容器（三分之一）不调整大小也很重要。标题应该在其中。我怎样才能做到这一点？

4

2 回答 2

1

演示——像这样的东西？

使用 CSS3 transition-duration( W3Schools ) 创建动画。

更新：

演示——所以你在寻找烤面包机的效果？

更新 2：

DEMO — 使用 jQuery.animate()来制作动画。

于 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 回答