(类)和(类)之间的平稳过渡:悬停
是否有一种脚本/方式，使普通的CSS :hover更平滑？
你的想法是，你有两个类--也许是梯度背景，然后脚本会顺利地交换这些类。所以渐变看起来就像你按下一个按钮。应该是自动的，所以调用触发器：$('.someclass').SmoothTransition();，它将自动使用.someclass:hover作为第二个类。
Bounty编辑
这其实是一个非常有趣的问题，得到了我的部分回答。我回答的问题是，它只适用于坚实的背景颜色，而不适用于CSS梯度或任何其他更具体的参数。
在任何jQuery开发人员库中，这个脚本都应该是“必需的”。所以，我提供150名代表给任何人，谁能想出办法或找到好的资源，谁就能做到这一点。
如果您的方法(单个jQuery插件)适用于所有这些示例，那么您就赢了！
示例： http://jsfiddle.net/4pYWD/
现代编辑
因为这个问题是在2011年CSS转型的时候提出的，所以商业游戏不是一种选择。然后理解，为什么在这个问题中，一切都集中在JS而不是CSS上。从这些答案，我开发了一个JS脚本，这是当时，完美的。它不再是，CSS转换是最终的解决方案，所以正确的答案被重新接受。
回答 6
Stack Overflow用户
发布于 2011-07-23 14:19:50
您可以使用css3跃迁来实现这一点。
举个例子：
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;
}你可以看看这个活生生的这里。
这个例子是用静态颜色给出的，但是您也可以使用css3梯度：
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, #1a82f7, #2F2727);
background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}
a:hover {
background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}Stack Overflow用户
发布于 2011-10-20 20:08:32
http://jsfiddle.net/btleffler/MZ6T8/
在Chrome、Safari for Windows和Opera中工作。火狐和IE对CSSRules对象的支持很差，所以结果充其量是不确定的。我会继续研究，看看我是否能解决这些问题。
css样式也需要调整。由于在最后一个示例中没有为:hover选择器分配背景色，所以新元素上没有背景色。
如果有人对这件事有什么想法的话，我很想听听。
编辑:固定
http://jsfiddle.net/btleffler/JfPBS/
这个更好用。我搜索所有的css规则以查找:hover选择器，然后将与该规则相关联的CSS文本和非:悬浮规则保存为可以插入到$().css()中的javascript对象。然后，通过使用$.extend()将悬停类扩展到普通类来计算实际的“悬停类”。这样，如果没有在:hover类中定义背景，那么它仍然有来自普通类的背景。
最后，我创建了一个元素，并将其直接放置在原始元素下，去掉CSS处理悬停的原因，将我的正常样式添加到原始元素中，将计算的悬停样式添加到它下面的新元素中。
在那之后，我们需要做的就是动画鼠标事件的不透明度。很简单！
Stack Overflow用户
发布于 2011-10-18 18:09:12
http://desandro.github.com/motion-emotion/该项目允许在除ie7和ie6以外的所有主要浏览器中进行转换。对于这两个浏览器，它具有渐进的增强功能。
https://stackoverflow.com/questions/6800950
复制相似问题
腾讯云开发者
