CSS Hover不同的开关转换
CSS Hover不同的开关转换
提问于 2013-06-03 15:52:18
请有人解释一下。
例如，我认为可以通过悬停来触发过渡。
我的悬停样式应该包含我希望元素在转换结束时拥有的CSS (在本例中为红色)。
然后，浏览器将使用在原始未悬停css上指定的持续时间从原始css转换为悬停css。
a{
color:blue;
transition: color 1s;
}
a:hover{
color:red;
}这工作得很好。
但是，如果我希望从非悬停到悬停的过渡是即时的呢？从实验来看，如果我将transition: color 0s;添加到我的悬停css中，它就会工作。但对我来说，这是没有意义的，因为我的css仍然有1秒的持续时间。如果有什么变化的话，我希望添加这会在悬停时引起1s的转换，当鼠标移开时会导致0的转换。
有人能解释一下我的理解哪里错了吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-03 15:59:54
这是过渡到那个状态的时间。因此，将0添加到悬停意味着它将是0过渡到悬停状态，然后1s转换回非悬停状态。
如果只是在原来的非悬停状态下，那么转换就同时适用于这两种情况。
Stack Overflow用户
发布于 2013-06-03 16:14:13
情况就是这样。如果你做了相反的事情，它就会完美地运作。
<a href="#">Test</a>css：
a{
color:blue;
transition: color 0s;
}
a:hover{
transition: color 1s;
color: peachpuff;
}见小提琴。
享受吧！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16900829
复制相关文章
相似问题
腾讯云开发者
