div의 일부만 위에있는 div의 CSS 전환?

Question

내가 이것을 얼마나 잘 설명하는지 보자. 나는 그것의 일부만 보여주는 CSS 여백을 통해 페이지에서 푸시 된 div에있는 웹 사이트의 색인에 대해 작업하고 있습니다. 표시되는 부분 위로 마우스를 가져 가면 나머지 부분이 아래로 미끄러 져 봅니다. 이것은 잘 작동합니다. 여백 변경 슬라이드의 전환 효과와 rgba를 사용한 배경색 변경이 이미 있습니다. 그것은 아주 좋아 보인다.

제 질문은 인덱스의 폭이 500px이고 호버링하기 전에 보이는 부분이 70px라는 것입니다. 따라서 인덱스 div를 표시하지 않으려는 경우 사용자가 실수로 마우스를 가리 키도록 화면의 상당 부분을 차지합니다. div의 처음 부분을 볼 수있는 부분 만 만들면 호버 전이 애니메이션이 활성화되어 전체 div가 표시됩니다. 또는 어쩌면 내가 어쩌면이 작은 div를 일종의 탭으로 부착 할 수 있습니다. 그러면 큰 div와 호버로 전환을 통해 그 자체가 파손될 것입니까?

나는 이것이 의미가 있기를 바랍니다. 고맙습니다.

#index { 
    position:fixed; 
    background:rgba(0,0,0,0.3); 
    width:500px; 
    height:500px; 
    top:0; 
    left:50%; 
    margin:-430px 0 0 -500px; 
    transition:0.5s; 
    -moz-transition:0.5s; 
    -webkit-transition:0.5s; 
    -o-transition:0.5s;} 

#index:hover { 
    background:rgba(0,0,0,0.8); 
    margin:0 0 0 -500px;} 

Answer 1

jsFiddle :

http://jsfiddle.net/wZ8zX/1/

HTML :

<div id="slider"><div id="trigger"><br></div></div> 

여기

는 현재 코드의 기본 생각이다 JS : jQuery를하지 않고

$('#trigger').hover(function(){ 
    $(this).parent().animate({'top':0},500); 
}); 
$('#slider').mouseleave(function(){ 
    $(this).animate({'top':-150},500); 
}); 

---

솔루션 :
http://jsfiddle.net/wZ8zX/3/

미안은 대개 JQuery와 질문을 검색, 그래서 난 단지 CSS를 사용

Answer 2

롤 태그를 확인하지 않았다 다른 블록을 사용하거나 의사 요소를 사용하여 전환을 원하지 않는 블록 부분을 오버레이 한 다음 마우스 오버 후 전환 요소를 사용하여 z- 색인을 만들 수 있습니다 요소를 오버레이하는 것보다 큽니다. 따라서이 요소의 모든 내용에 액세스 할 수 있습니다. http://jsfiddle.net/kizu/Y3px6/1/