CSS переводить дочерний элемент, когда родитель зависает

Question

Я пытаюсь создать кнопку со скользящим фоном. Эта кнопка состоит из

• родителя: контейнер с границей (.slidebutton)
• ребенок: текст для кнопки запроса (.text)
• ребенок: цветной фон, который (.background)

Я хотел был бы выполнить slid-in, когда контейнер завис (.background) e-in переход со свойствами CSS. Это мой текущий код (я прокомментировал перелив заявление родителя, чтобы показать скользящий фон):

.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

Когда я парить контейнер ничего не происходит. Что мне не хватает?

Answer 1

Так близко .. Вам просто нужно удалить .slidebutton от действия парения, как вы уже внутри этого элемента с помощью .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%); 
}