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的高度.

当我在悬停时将高度从2px更改为5px时,我无法找到使.total扩展的方法.当我现在改变高度时,它会起作用,它会向下扩展3px并在鼠标离开时缩小3px.

我希望它扩大而不是下降.

有任何想法吗？

解决方法

要使用悬停,您必须这样做：
.total：hover {margin-top：-8px;
        身高：5px;}

但是,您必须记住文档的正常流程是从上到下.要使较低级别的div向上扩展,您可能需要缩小其上方的元素.在大多数情况下,只有javascript才能完成.