CSS：高度变化时向上展开div？

这是我的代码如下所示：CSS：高度变化时向上展开div？

<div class="progress"> 
    <div class="total"> 
     <span class="current"></span> 
    </div> 
</div>

这里是上述4个标签的CSS：

.progress 
{ 
    margin-top: -5px; 
    vertical-align: bottom; 
    border-bottom: 1px solid #090605; 
} 

.total 
{ 
    background-color: #221F1E; 
    border-top: 1px solid #2F2F2F; 
    height: 2px; 
} 
    .hover 
    { 
     margin-top: -8px; 
     height: 5px; 
    } 

.current 
{ 
    float: left; 
    position: relative; 
    top: -1px; 
    height: 100%; 
    color: blue; 
}

我操纵的.total的高度悬停事件。

我不能找到一种方法，使.total当我从2px改变高度5px悬停扩大了。当我现在改变高度时，它可以工作，当鼠标离开时，它向下扩展3px并缩小3px。

我想要它扩大向上而不是向下。

任何想法？

来源

2012-01-12 Brian Graham

要使用悬停，你必须做这样说：
.total:hover{margin-top: -8px; height: 5px;}

但是，你必须记住，一个文件的正常流动是自上而下。为了让低级div向上扩展，您可能需要缩小它上面的元素。在大多数情况下，只有使用javascript才能完成某件事

来源

2012-01-12 15:05:25 Rob

我结束了使用这个解决方案，虽然使用父div。 – 2012-01-12 15:21:56

+1这是更好，然后我的[解决方案]（http://jsfiddle.net/gm3z4/）的绝对定位在父母和调整高度和悬停等顶部/底部 – 2012-01-12 15:27:20

也许尝试负值？ -5px

来源

2012-01-12 15:05:53 Robert

有一个边界，干扰悬停当我使用负值，所以我不想使用它们。 – 2012-01-12 15:10:36

难道你不能只让.total位置相对于上层元素。当鼠标悬停，更改上边距

使用jQuery，你可以这样做：

$(".total").hover(
    function() { 
    $('.total').css('margin-top','-8px'); 
    $('.total').css('height','5px'); 
    }, 
    function() { 
    $('.total').css('margin-top','0px'); 
    $('.total').css('height','2px'); 
    }

来源

2012-01-12 15:28:31 batbaatar

，如果你只是用bottom性能发挥它也适用。这告诉底部开始的位置，以便它保持固定在指定的位置，并且如果需要的话它会向上扩展。

来源

2015-06-14 22:06:29

太棒了！从来没有想过这个细节，但你是绝对正确的。 – Greg 2015-11-06 09:07:23

CSS：高度变化时向上展开div？

回答

相关问题