JavaScript：設置鼠標懸停時CSS變化的方向？

Question

在以下代碼（see example fiddle）中，如果鼠標懸停在綠色上，兩個紅色框的高度將會改變，但高度會向下擴展。有沒有辦法讓高度向上擴展？

CSS：

.one{ 
    position: absolute; 
    left: 110px; 
    top: 0px; 
    background: green; 
} 

.two { 
    position: absolute; 
    left: 70px; 
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px; 
} 

.three { 
    position: absolute; 
    left: 200px; 
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px; 
} 

HTML：

<div class="one">15,000,000</div> 
<div class="two">700</div> 
<div class="three">800</div> 

的javascript：

$('.one').mouseover(function(){ 
    $('.two, .three').css('height','50px'); 
}).mouseout(function(){ 
    $('.two, .three').css('height', '25px'); 
    }); 

Answer 1

只是改變箱的top還有：

$('.one').mouseover(function(){ 
    $('.two, .three').css({ height : '50px', top: '15px'}); 
}).mouseout(function(){ 
    $('.two, .three').css({ height : '25px', top: '40px'}); 
    }); 

http://jsfiddle.net/wyxJ7/12/

Answer 2

試試這個， http://jsfiddle.net/Gbwjj/

它更多的是CSS的問題比一個JavaScript一個

Answer 3

您可以使用在同一時間改變「頂」的CSS屬性，以便用戶感知它是向上擴展的高度。這裏有一個使用animate（）的例子。

$('.one').mouseover(function(){ 
    $('.two, .three').animate({ 
     height:"50px", 
     top:"-=25" 
    }); 
}).mouseout(function(){ 
    $('.two, .three').animate({ 
     height:"25px", 
     top:"+=25" 
    }); 
    });