div 후에도 다른 div 뒤에 여전히 애니메이션 됨

Question

상황 : 3 div의 | left | center | right | 왼쪽에는 3 개의 다른 div가 있고 오른쪽에는 3 개의 div가 있습니다. 이 6 div 중 하나를 통과하면 너비가 증가합니다. 오른쪽은 괜찮지 만 왼쪽면이 커지면 가운데 div 뒤에 여전히 있습니다.

너무 쉽게 볼 수 있습니다. 왼쪽 메뉴 위로 마우스를 이동하면 가운데 div에 텍스트가 계속 표시됩니다. 이 동작은 오른쪽에서 발생하지 않습니다.

<div class="wrapper"> 
     <div class="menu_left"> 
      <div class="item_left"> </div> 
      <div class="item_left"> </div> 
      <div class="item_left"> </div> 
     </div> 

     <div class="central">XXXXXXXX XXXXXXX</div> 

     <div class="menu_right"> 
      <div class="item_right"> </div> 
      <div class="item_right"> </div> 
      <div class="item_right"> </div> 
     </div> 
    </div> 
<script> 
    //$("div").fadeIn(3500); 

    $(".item_left").mouseenter(function() { 
     $(this).animate({ width: "240px"}, 350); 

    }); 
    $(".item_left").mouseleave(function() { 
     $(this).animate({ width: "100px" }, 350); 
    }); 
    $(".item_right").mouseenter(function() { 
     $(this).animate({ width: "240px"}, 350); 
    }); 
    $(".item_right").mouseleave(function() { 
     $(this).animate({ width: "100px" }, 350) 
    }); 
</script> 

http://jsfiddle.net/lcssanches/E7B3t/1/

편집 :

왼쪽 메뉴 : 올바른 :이

마우스 오른쪽 메뉴를 방지합니다!

Answer 1

아래 CSS 코드에 의해 판단, 그것은 당신이 중앙 div을 충당하기 위해 왼쪽/오른쪽 항목을 원하고 나타납니다 만 실수는 맞춤법에게 하나 - postion:은 position:

div.menu_left,div.menu_right{ 
    postion: relative; 
    margin:0; 
    padding:0; 
    display:inline-block; 
    width: 100px; 
    height: 100%; 
} 

해야한다 http://jsfiddle.net/E7B3t/3/