Question

是否有脚本/方式，使普通的CSS :hover更加流畅？

想法是，你有两个类可能有渐变背景，并且脚本可以平滑地交换类。所以渐变看起来就像按下按钮一样。应该是自动的，因此您调用触发器：$('.someclass').SmoothTransition();并且它会自动使用.someclass:hover作为第二类。

赏金编辑

这实际上是一个非常有趣的问题，我得到了部分答案。我的答案的问题是，它仅适用于纯色背景颜色，不适用于CSS渐变或任何其他更具体的参数。

这个脚本应该是任何jQuery开发者库中的“必备”。所以，我向任何人提供150个代表，他们可以想办法或找到好的资源，可以做到这一点。

如果您的方法（单个jQuery插件）适用于所有这些示例，那么您就赢了！

示例：http://jsfiddle.net/4pYWD/

现代编辑

由于这个问题是在2011年问到CSS转换时，商业游戏不是一种选择。然后明白，为什么一切都集中在JS而不是CSS，在这个问题上。从这些答案中，我开发了一个JS脚本，当时是完美的。它不再是，CSS转换现在是最终的解决方案，所以正确的答案被重新接受。

Answer 1

您可以使用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, #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);
}

Answer 2

http://jsfiddle.net/btleffler/MZ6T8/

适用于Chrome，Safari for Windows和Opera。 Firefox和IE对CSSRules对象的支持很少，因此结果最多也是如此。我会继续努力，看看我是否可以解决问题。

css样式也需要调整。由于在最后一个示例中没有为:hover选择器指定背景颜色，因此新元素上没有背景颜色。

如果有人对这些东西有一些想法，我很乐意听到它们。

编辑：修复

http://jsfiddle.net/btleffler/JfPBS/

这个效果更好。我搜索:hover选择器的所有css规则，然后保存与该规则关联的CSS文本，并将non：hover规则保存为可以插入$().css()的javascript对象。之后，我通过使用$.extend()将悬停类扩展到普通类来计算实际的“悬停类”。这样，如果:hover类中没有定义背景，它仍将具有普通类的背景。

最后，我创建一个元素，并将其直接放在原始元素下，摆脱CSS处理悬停的原因，将原始样式添加到原始样式，并将计算出的悬停样式添加到其下的新元素。 / p>

之后我们需要做的就是为鼠标事件的不透明度设置动画。简单！

Answer 3

http://desandro.github.com/motion-emotion/此项目允许在除ie7和ie6之外的所有主要浏览器中进行转换。它为这两个浏览器提供了渐进增强功能

Answer 4

所以我正在寻找的解决方案就是：

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script>
    $(document).ready(function() {
        $("p").hover(function () {
            $(this).toggleClass("blue", 1000);
        });
    });
</script>
<style>
    p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; color: white; background: yellow;}
    .blue {background: blue;}
</style>
</head>
<body>
<p class="">Hover over this</p>
</body>
</html>

查看现场演示：http://jsfiddle.net/hobobne/uRJWG/

注意：不适用于css3渐变。但还是......

Answer 5

这真的非常粗糙，但我有一个fiddle应该是（在理论上）可以在浏览器和任何你想要的图像上工作的那个。现在它有点hacky（读得非常好），但它是一个很好的起点，并且可能会让人们顺利完成答案。此外，如果您快速执行此操作，它目前也不起作用。在鼠标离开元素之前，按钮必须完全淡入或淡出。就像我说的那样，hacky只是一个开始。

Answer 6

我终于想出了在悬停时平稳过渡的最终极方式。我希望这会帮助其他人解决同样的问题。我目前的测试表明，对于我能提出的所有例子，这都是100％的。适用于超链接和普通容器。

<强> Download from GitHub

此插件有3个选项。

showSpeed： [数字] - 画眉动画速度
hideSpeed： [数字] - 简化动画速度
includeText： [boolean] - 确定是否使用该元素的html

如果您对如何优化此插件有任何想法，请与我联系或发表评论：）

两个（类）和（类）之间的平滑过渡：悬停

6 个答案: