부모가 떴을 때 CSS가 자식을 번역합니다.

Question

슬라이딩 배경으로 버튼을 만들려고합니다. 이 버튼은

• 부모로부터 구성되어 보더를 가지는 컨테이너 (.slidebutton)
• 아이 : 버튼 프롬프트에 대한 텍스트 (.text)
• 아이 : 컬러 배경이 콘테이너를 찰 때 슬라이드 인 (.background)

슬라이드를 수행하고 싶습니다. CSS 속성이있는 e-in 전환. 내가 컨테이너 아무 일도 발생하지 가져 가면

.slidebutton { 
    display:inline-block; 
    text-align:center; 
    padding:16px 30px; 
    border:1px solid green; 
    position:relative; 
    cursor:pointer; 
    /*overflow:hidden;*/ 
} 

.slidebutton>.background { 
    position:absolute; 
    top:100%; 
    left:0%; 
    width:100%; 
    height:100%; 
    background-color:green; 
    -webkit-transition: 0.2s ease-in-out; 
    -moz-transition: 0.2s ease-in-out; 
    -o-transition: 0.2s ease-in-out; 
    transition: 0.2s ease-in-out; 
} 

.slidebutton:hover .slidebutton>.background { 
    -webkit-transform: translate(0%,-100%); 
    -moz-transform: translate(0%,-100%); 
    -o-transform: translate(0%,-100%); 
    -ms-transform: translate(0%,-100%); 
    transform: translate(0%,-100%); 
} 

JSFiddle

: 이것은 내 현재 코드 (I 슬라이딩 배경을 보여주기 위해 부모에 오버 플로우 문을 주석 한)입니다. 내가 뭘 놓치고 있니?

Answer 1

너무 가까이 ... 당신은 당신이 이미으로 .slidebutton:hover

JSFiddle

.slidebutton:hover> /*removed: .slidebutton */ .background { 
-webkit-transform: translate(0%,-100%); 
-moz-transform: translate(0%,-100%); 
-o-transform: translate(0%,-100%); 
-ms-transform: translate(0%,-100%); 
transform: translate(0%,-100%); 
} 

을 사용하여이 요소 내에 마우스 오버 액션에서 .slidebutton를 제거해야