css - CSS Hover 不同的开/关过渡

Question

请有人可以解释以下内容。

我相信过渡可以通过例如悬停来触发。

我的悬停样式应该包含我希望我的元素在过渡结束时具有的 CSS（在本例中为颜色：红色）。

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

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

这完美地工作。

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

有人可以解释我的理解哪里错了吗？

score 4 · Accepted Answer

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

如果它仅在原始非悬停上，则过渡适用于两者。

score 2 · Accepted Answer

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

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

CSS：

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

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

见jsfiddle。
享受！

2 回答 2