a {
color:blue;
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn't mean it will
work in a browser made by that vendor either, it's just for
future-proofing purposes I guess. */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}
a:hover { color:red; }
4 回答
我在问题中你知道“我假设JavaScript用于创建这种效果”,但CSS也可以使用,下面是一个例子 .
CSS
HTML
这是上面代码的JSFIDDLE!
Marcel在其中一个答案中指出你可以“转换多个CSS属性”,你也可以使用“all”来实现所有你的悬停样式的元素,如下所示 .
CSS
HTML
对于"all"示例,这是一个JSFIDDLE!
现在人们只是使用CSS3 transitions,因为它比messing with JS容易得多,浏览器支持相当不错,如果它不起作用它也很重要 .
这样的事情可以完成工作:
您还可以通过使用逗号分隔每个声明来转换具有不同时序和缓动函数的特定CSS属性,如下所示:
Demo here
您可以使用JQueryUI执行此操作:
http://jsfiddle.net/dWCbk/
在你的CSS中尝试这个: