当父项悬停时，CSS 翻译子项

Question

我正在尝试创建一个带有滑动背景的按钮。这个按钮是由

• parent:带边框的容器(.slidebutton)
• child:按钮提示的文本 (.text)
• child:当容器悬停时滑入的彩色背景 (.background)

我想使用 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%);
}