最好将CSS定时转换添加到链接选择器（a）或悬停状态（a：hover）？

Question

使用CSS过渡来创建淡入/淡出的翻转时，最好将它放在a选择器或a:hover选择器下吗？

我的直觉是将它放在a:hover选择器上，因为这是翻转的活动部分，但是看一些示例，人们似乎在a之后声明它们。

两者似乎都很完美但我真的很想知道哪个被认为是“正确的”，如果可能的话，为什么。

所以，这个：

a { color:blue; transition:.5s; }

a:hover { color:red; }

或者这个（我的直觉）：

a { color:blue; }

a:hover { color:red; transition:.5s; }

感谢。

（故意省略供应商前缀）

Answer 1

这取决于您的需求，使用transition

中的a属性

a { color:blue; transition:.5s; }

当鼠标悬停/悬停元素时以及鼠标悬停时

将传输元素

这个地方

a:hover { color:red; transition:.5s; }

只有在悬停时才会传输元素，它会在您取出鼠标时恢复正常。

Demo（来回过渡）

Demo 2（仅在hover上传输，一旦鼠标离开该元素，它将恢复正常状态）

  

注意：我已经增加了transition时间以显示其实际情况   的事项。

---

结论：一般来说，transition不应该在:hover上使用，因为当鼠标从元素中取出时它不会传输。但正如我再说一遍，这取决于需求。