悬停父级时的 CSS 翻译子项

Question

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

• 父项：带边框的容器 （ .slidebutton ）
• 子项：按钮提示的文本 （ .text ）
• 子级：容器悬停时滑入的彩色背景 （ .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:hover从悬停操作中删除.slidebutton，因为您已经在此元素中

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%);
}