是否有脚本/方式,这使得普通的CSS：悬停更加流畅？
想法是,你有两个类可能有渐变背景,脚本可以顺利交换类.所以渐变看起来就像按下按钮一样.应该是自动的,所以你调用触发器：$(‘.someclass’).SmoothTransition();它将自动使用.someclass：hover作为第二个类.
赏金编辑
这实际上是一个非常有趣的问题,得到了我的部分答案.我的答案的问题是,它仅适用于纯色背景颜色,不适用于CSS渐变或任何其他更具体的参数.
这个脚本应该是任何jQuery开发者库中的“必备”.所以,我向任何人提供150个代表,他们可以想办法或找到好的资源,可以做到这一点.
如果您的方法(单个jQuery插件)适用于所有这些示例,那么您就赢了！
现代编辑
由于这个问题是在2011年问到CSS转换时,商业游戏不是一种选择.然后明白,为什么一切都集中在JS而不是CSS,在这个问题上.从这些答案中,我开发了一个JS脚本,当时是完美的.它不再是,CSS转换现在是最终的解决方案,所以正确的答案被重新接受.
解决方法
您可以使用
css3 transitions来实现这一目标.
一个例子：
a {
color: blue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover {
color:yellow;
}
你可以看看这个活着的here.
示例使用静态颜色,但您也可以使用css3 gradients：
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background: -webkit-linear-gradient(left,#2F2727,#1a82f7,#2F2727);
background: -moz-linear-gradient(left,#2F2727);
}
a:hover {
background: -webkit-linear-gradient(left,#1a82f7 5%,#1a82f7 95%,#2F2727);
}
