CSS悬停不同的开/关转换

Question

请有人解释以下内容。

我认为转换可以通过例如悬停来触发。

我的悬停样式应包含我希望元素在过渡结束时拥有的CSS（在本例中为color：red）。

然后，浏览器将使用原始未发布的 css中指定的持续时间从原始css转换为悬停css。

a{
    color:blue;
    transition: color 1s;
}
a:hover{
    color:red;
}

这很有效。

但是如果我想要从非悬停到悬停的转换是即时的呢？从实验开始，如果我将transition: color 0s;添加到我的悬停css中，它似乎有效。但对我来说这没有意义，因为我的 a css仍然有1秒的持续时间。如果有的话，我希望在鼠标移开时添加这会导致悬停时的1s转换和0s转换。

有人可以解释我的理解错误吗？

Answer 1

这是向该州过渡的持续时间。 因此，将0添加到悬停意味着它将是0s转换到悬停状态，然后1s转换回非悬停状态。

如果仅在原始非悬停时，则转换适用于两者。

Answer 2

这就是情况。如果你反其道而行之，那就完美了。

<a href="#">Test</a>

的CSS：

a{
  color:blue;
  transition: color 0s;
}

a:hover{
  transition: color 1s;
  color: peachpuff;
}

见jsfiddle。
享受！