Question

我想在悬停时更改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;
}

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

Answer 1

here是一个可能的答案

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;
}

Answer 2

您需要将转换应用于.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%;
}

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

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

使用css过渡来改变元素位置

2 个答案: