CSS로 슬라이딩 div를 숨기는 방법

Question

슬라이딩 효과를 만들고 싶습니다. 나는 옆에 두 개의 div가있다. 왼쪽으로 밀면 div id="left"을 가리키면 div id="right"이 숨겨집니다. div id="left" 주변에 div id="left" 주위에 약간의 공간을 추가하는 쥐덫 추적기와 같은 것이 있습니다. 추가 장소는 div id="right"을 숨기려면 추가 위치가 필요합니다. 슬라이드 효과

<div id="main"> 
    <div id="tracker"> 
     <div id="left">slides right</div>  
     <div id="right">should disappear only when hover red div</div> 
    </div> 
</div> 

그리고 CSS :

이

/*Sliding Effects:*/ 
#tracker:hover #left { 
    margin-left: 150px; 
    position: absolute; 
    -webkit-transition-duration: 2s; 
    -moz-transition-duration: 2s; 
    -o-transition-duration: 2s; 
    transition-duration: 2s; 
} 
#tracker:hover #right { 
    visibility:hidden; 
} 
#tracker:hover { 
    width: 400px; 
    height: 200px; 
    margin-top: -25px; 
    padding-top: 25px; 
} 

이제 문제가 있다는 것입니다

아래 Example

는 HTML입니다 : 내가 무슨 뜻인지 보여주기 위해 예를 구축 호버링을 할 때도 효과가 시작됩니다 div id="right". 그래서 나는 아직도이 문제를 해결하는 방법을 모른다.

나를 도울 수있는 사람이 있다면 정말 감사 할 것입니다.

Answer 1

호각 div#right 인 경우에도 효과가 시작됩니다. 이는 div#tracker 하위이며 호버 효과가 상위까지 바운딩되기 때문입니다.

CSS를 사용하여 원하는 것을 얻으려면 DOM 위치를 변경해야합니다. 다음 변경하려면 예를 들어 내가 가진 사용하면 그것이 작동되도록하기 :

• div#right
  지금
• #tracker, #left, #right DIV 요소 div#right 이후
• 이제 형제가 아닌 아이의입니다 위치 이제 절대되는 div#tracker 형제입니다 div#tracker 나는 다음과 같은 CSS 선택기를 변경 #tracker:hover #right { }#tracker:hover + #right { }-

DEMO (using your example)

Answer 2

좋아, 그래서

이 예제를 참조 overflow:hidden; 같은 폭과 높이로 주변에 컨테이너 (#left-outer)를 추가하고 추가하여 당신이 그것을 위에 마우스를 올려 경우에만 빨간색 상자 트리거의 애니메이션을 만들 수 있었다 : http://jsfiddle.net/N4X5P/

내가 도울 수 있었으면 좋겠다.