jquery - creating interactive elements

I am trying to say: "If the cursor is over either of the below elements, bring the height of the inner element up to the halfway point of the parent element".

Once the inner element has been moved up half way, I would like to be able to move the mouse around within and across both elements, without any change to the outer or inner elements position.

On mouseout of either of the elements, I would like the inner element height to lower to the height of the outer element again.

Heres the elements:

<div id="slid开发者_运维技巧e_back_1" class="slide_back float" style=" width: 100px; height: 100px; margin: 10px; background-color: black; overflow: hidden; ">
    <div id="slide_hide_1" class="slide_hide float" style=" width: 100px; height: 100px; margin-top: 100px; background-color: silver; "></div>
    <div class="clear"></div>
</div>

I have been messing around with various jquery including .hover, .mouseover and .mouseout without much success.

QUESTION:

How do I code the jquery to achieve this functionality, keeping in mind that there may be multiple of these on a single page.

Any help appreciated guys...

Please, see if I understood you well: http://jsfiddle.net/QfYHA/2/

UPDATE: The code was also copied here.

$('.slide_back').hover(function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height / 2 + 'px'}, 400);
}, function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height + 'px'}, 400);
});

Does this help ? http://jsfiddle.net/TqLUt/6/

 $('.slide_back').mouseover(function() {
   $(this).find('.slide_hide').css('marginTop', '50px');
 });
 $('.slide_back').mouseout(function() {
   $(this).find('.slide_hide').css('marginTop', '100px');
 });