javascript - How to target a child of a sibling div using jquery -

i trying study jquery , quite shucked on figuring our how target child specific class name of sibling div.

here fiddle have written: http://jsfiddle.net/7c9f4/2/

html:

<div id="container">     <div class="item">         <div class="item-image">             <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="google" />         </div>         <div class="item-name">             item 1         </div>         <div class="item-body">             <div class="body-inner hidden">                 body 1             </div>         </div>     </div>     <div class="item">         <div class="item-image">             <img width="100" src="https://www.google.com/images/srpr/logo11w.png" alt="google" />         </div>         <div class="item-name">             item 2         </div>         <div class="item-body">             <div class="body-inner hidden">                 body 2             </div>         </div>     </div> </div> 

jquery:

$('.item .item-image').bind({     mouseenter: function() {         $(this).siblings('.item-body').children('body-inner').show();         console.log('entered');     },     mouseleave: function() {         $(this).siblings('.item-body').children('body-inner').hide();         console.log('left');     } }); 

i have tried use jquery methods .next() , siblings() try child using .children() method , doesn't seem work. :/

body-inner needs have . indicate class selector:

$(this).siblings('.item-body').children('.body-inner').hide(); 

additionally, of jquery 1.7 .on method preferred .bind:

$('.item .item-image').on({     mouseenter: function() {         $(this).siblings('.item-body').children('.body-inner').show();         console.log('entered');     },     mouseleave: function() {         $(this).siblings('.item-body').children('.body-inner').hide();         console.log('left');     } }); 

updated fiddle