CSS: Expand div up when changing height?

Question

This is what my code looks like:

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

Here is the css from the above 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 control the .total height in the hang event.

I cannot find a way to make .total for extension when I change the height from 2px to 5px on hover. When I change the height now, it works, it expands by 3px and shrinks by 3px when the mouse leaves.

I want it to expand up , not down.

Any ideas?

Answer 1

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

However, you must remember that the normal flow of a document is from top to bottom. For the lower level of the div to expand upward, you may need to squeeze the element above it. Something in most cases only runs with javascript.

Answer 2

Can't you make a general position relative to the top element. And when the mouse freezes, you change the top edge

With jQuery you can do something like:

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

Answer 3

It also works if you are just playing with the bottom property. This indicates where the bottom starts, so it will remain fixed at the indicated position, and if necessary, it will expand upward.

Answer 4

maybe try negative values? -5px