Question

我有一个div .box，其绝对位置设置在父div的底部。它没有设置顶部位置，因为不同.box div的高度不同。将鼠标悬停在父div上时，我想通过过渡效果将其top位置更改为0。

如果我没有默认定义顶部位置，则以下代码转换不起作用。我尝试过使用top: auto，但仍然无效。如何在不定义顶部位置的情况下使用转换。

这是我的代码：

HTML：

<div class="wrap">
    <div class="box">
        Box
    </div>
</div>

CSS：

.wrap{
    position: relative;
    height: 200px;
    width: 200px;
    background: green;
}

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all  0.9s ease 0s;
    top: 50%; /*== does not work without it ==*/
}

.wrap:hover .box{
    top: 0;
    bottom: 0;
}

小提琴： http://jsfiddle.net/5hs09apn/

Answer 1

与使用top：http://jsfiddle.net/5hs09apn/2/

略有不同

为框设置height，并在悬停时将其设置为100%;让底部为零，所以你甚至不需要使用top

.box{
    background: yellow;
    position: absolute;
    bottom: 0;
    left: 0;
   height:20px;
    transition: all  1s ease 0s;
}

.wrap:hover .box{
   height:100%;
    bottom: 0;
}

＆＃13;

.wrap {
  position: relative;
  height: 200px;
  width: 200px;
  background: green;
}
.box {
  background: yellow;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 20px;
  transition: all 1s ease 0s;
}
.wrap:hover .box {
  height: 100%;
  bottom: 0;
}

＆＃13;

<div class="wrap">
  <div class="box">
    Box
  </div>
</div>

＆＃13;

Answer 2

在JQuery中添加Top属性，使用.box获取position()顶部的当前值。
这将是Top的动态分配，不会影响您改变.box高度的条件。

在执行此操作时，您还必须在JQuery部分中添加悬停效果，因为Top将在此处定义，CSS不知道如何处理悬停。

检查小提琴here

这是添加的JQuery功能：

$(document).ready(function(){
    var x = $('.box').position();
    var myTop = x.top;
    $('.box').css("top",myTop+"px");
    $('.box').css("transition","all  0.9s ease 0s");
    $('.wrap').bind('mouseover',function(){
        $('.box').css("top","0px");
        $('.box').css("bottom","0px");
    });
    $('.wrap').bind('mouseout',function(){
        $('.box').css("top",myTop+"px");
        $('.box').css("bottom","0px");
    });
});

希望这能满足您的需求。

Answer 3

您可以使用：

.wrap:hover .box{
    margin-bottom: 100%;
}

尝试不同的百分比，直到你得到一个你喜欢的。这很粗糙，但我认为它可行。

CSS过渡和自动定位

3 个答案: