1

我想在悬停时更改 div 的位置，我可以使用以下代码来完成。当我将鼠标悬停在 上的任何位置时.box， 的位置.info会从底部变为顶部。

我想用过渡效果改变它的位置，让它看起来像是在向上移动而不是向上快速出现。可以仅使用 CSS 完成吗？

我正在尝试使用转换属性，但无法使其工作。这是我的代码：

HTML：

<div class="box">
    <div class="img"><img src="http://i.imgur.com/SGw04SV.jpg" /></div>
    <div class="info">
        <div class="title">Hello world</div>
        <div class="more">more stuff</div>
    </div>    
</div>

CSS：

.box{
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
    -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

.info{
    position: absolute;
    bottom: 0;
    
}

.box:hover .info{
    top: 0;
}

演示： https ://jsfiddle.net/fXXsS/

4

2 回答 2

2

这是一个可能的答案

HTML：

    <div class="box">
        <img src="http://i.imgur.com/SGw04SV.jpg"/>
        <div class="info">
            <div class="title">Hello world</div>
            <div class="more">more stuff</div>
        </div>
    </div>

CSS：

    .box {
      position: relative;
    }
    .box img {
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
    .info {
      position: absolute;
      top: 0;
      margin-top: 400px;
    }
    
    .box:hover .info {
      margin-top: 0;
      -moz-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
    }
于 2013-09-13T20:21:52.333 回答
1

您需要将过渡应用到.info. 您只能为属性设置动画，而不是布局：

    .box {
        width: 400px;
        height: 400px;
        overflow: hidden;
        position: relative;
    }
    
    .info {
        position: absolute;
        top: 0; margin-top: 90%;
        -moz-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;    
    }

    .box:hover .info {
        margin-top: 0%;
    }

https://jsfiddle.net/Recode/fXXsS/2/

编辑：我知道，目前它有点小技巧，因为如果高度发生变化，就会出现问题。;)

于 2013-09-13T20:01:46.133 回答