Question

This is what my code looks like:

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

Here is the css of the above 4 tags:

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

I manipulate the height of .total in a hover event.

I can’t find a way to make .total to expand up when I change the height from 2px to 5px on hover. When I change the height now, it works, it expands down by 3px and shrinks by 3px when the mouse leaves.

I want it to expand up instead of down.

Any ideas?

Answer 1

To use hover, you must do it this way:
.total:hover{margin-top: -8px;
height: 5px;}

However, you must remember that the normal flow of a document is top to down. To make a lower level div expand upward, you may need to shrink the element above it. Something accomplished only with javascript in most cases.