css - 悬停状态在动画上无法正常工作

Question

我有一个元素，当用户将鼠标悬停在其上时:hover（所以:hover状态应该回到正常状态，但这不会发生。怎么了？

#test {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 20;
    transition: left 1s linear;
}

#test:hover {
    left: 200px;
    background: green;
}

这是jsFiddle 演示。

Answer 1

内

#test:hover {
    left: 100px;
    background: green;
}

您告诉元素超出自身的宽度，并且过渡会强制它这样做。如果您将悬停过渡更改为left: 100px;它将起作用。

过渡是主人，随意悬停奴隶;）