当父级悬停时CSS翻译子级答案

【问题标题】：CSS translate child when parent is hovered当父级悬停时CSS翻译子级
【发布时间】：2015-01-10 19:11:22
【问题描述】：

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

父级：带边框的容器 (.slidebutton)
child：按钮提示文本 (.text)
child：在容器悬停时滑入的彩色背景 (.background)

我想在 .这是我当前的代码（我在父级上注释了溢出语句以显示滑动背景）：

.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

当我悬停容器时，没有任何反应。我错过了什么？

【问题讨论】：

标签： css css-transitions translate-animation

【解决方案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%);
}

【讨论】：