Question

我正在开发一个网站，我有一个错误，如fiddle所示。

我的页脚，在悬停时，应该上升，并且“鼠标移出”应该回到他的位置，但是如果我出去，并将鼠标放在上去之后去的地方，页脚会自动上升而不会顺利的效果......

我无法用其他更简单的方式解释这一点，所以如果有人理解并知道如何提供帮助，我真的很感激！

以下是相同的代码：

html, body{
    height: 100%;
}
.x{
    width:100%;
    min-height: 100%;
    background-color: #000;
    color: #FFF;
}
.y{
    background-color: #ABC;
    width: 100%;
    text-align: left;
    position: fixed;
    bottom:-50px;
    height: 100px;
    -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -ms-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    transition: 1s ease-in;
}
.y:hover{
    -webkit-transition: ease;
    -moz-transition: ease;
    -ms-transition: ease;
    -o-transition: ease;
    transition: ease;
    -webkit-transform: translate(0px,-100px);
    -moz-transform: translate(0px,-100px);
    -ms-transform: translate(0px,-100px);
    -o-transform: translate(0px,-100px);
    transform: translate(0px,-100px);
}

<body>
    <div class="x"> x
    </div>
    <div class="y"> y
    </div>
</body>

Answer 1

您需要为悬停

上的过渡添加时间值

transition: 0.5s ease;

查看更新的fiddle;

css过渡和翻译bug

1 个答案: