When you hover over the green section in the code snippet below, the height of the two red boxes will change. However, the height currently expands downwards. Is there a way to make the height expand upwards instead?
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');
});