Question

我试图创建一个具有滑动背景的按钮。此按钮由

组成

parent：具有边框（.slidebutton）
child：按钮提示（.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，因为你已经使用.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%);
}

当父母徘徊时，CSS会翻译孩子

1 个答案: