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

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 demo。

Answer 1

在

中

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

你告诉元素超出自身的宽度，过渡迫使它这样做。 如果您将悬停转换更改为left: 100px;，它将起作用。

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