如何让悬停颜色淡入淡出？ - jQuery，HTML

Posted 2023-05-08

【中文标题】如何让悬停颜色淡入淡出？ - jQuery，HTML

【英文标题】：How to Have the Hover Color Fade In and Out? - jQuery, HTML

【发布时间】：2012-12-03 12:38:42

【问题描述】：

一个例子：

这是我创建的一个 html 示例：http://jsfiddle.net/Tgjnp/2/

问题：

CSS：

a 
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;            


.green 
    color: green;                        

通过例子，集合class是得到fade animation，所以指定的颜色在mouse hover上淡入淡出。除此之外，它应该恢复回到它的默认颜色。

问题是，如何让悬停颜色淡入淡出？

【问题讨论】：

如果您可以使用 jquery UI 库，请查看：***.com/questions/967815/… 或 ***.com/questions/734068/…

【参考方案1】：

你不能用普通的 jQuery 为颜色设置动画。为此，您必须使用某种插件，即jQuery UI（这是巨大的）或Color animation plugin

您也可以使用一些简单的 CSS3 过渡 - DEMO

这在较新的浏览器中效果很好，但在较旧的 IE-s 中却不行。

a 
    color: #bbb;
    text-decoration: none;
    margin-right: 2em;
    font-weight: bold;

    -webkit-transition: color .5s linear;   
       -moz-transition: color .5s linear; 
            transition: color .5s linear;    

【讨论】：

非常感谢您的回答。

【参考方案2】：

here 有一个很好的解释。它不使用任何花哨的 CSS3 魔法，只使用 JQuery。只需添加结束和开始颜色，JQuery 就会为过渡设置动画。