CSS: Расширить div вверх при изменении высоты?

Question

Вот как выглядит мой код:

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

Вот CSS из вышеупомянутых 4 тегов:

.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, когда мышь уходит.

Я хочу, чтобы он расширился вверх вместо вниз.

Есть идеи?

Answer 1

Чтобы использовать hover, вы должны сделать это следующим образом:
.total:hover{margin-top: -8px; height: 5px;}

Однако вы должны помнить, что нормальный поток документов идет сверху вниз. Чтобы нижний уровень div расширялся вверх, вам может понадобиться уменьшить элемент над ним. В большинстве случаев что-то выполняется только с помощью JavaScript.

Answer 2

Это также работает, если вы просто играете со свойством bottom. Это говорит о том, где начинается дно, поэтому оно останется зафиксированным в указанной позиции и при необходимости расширится вверх.

Answer 3

Разве вы не можете просто сделать .total позицию относительно верхнего элемента. И когда мышь зависает, вы меняете верхнее поле

С JQuery вы можете сделать что-то вроде:

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

Answer 4

может попробовать отрицательные значения? -5px