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？

回答

相關問題