如何使用不同的颜色来达到效果

How to use different color for effect

本文关键字：颜色 何使用      更新时间：2023-11-29

工作Fiddle：https://jsfiddle.net/9u0ggeLL/3/

HTML:

<ul>
    <li id="one"><a>Dashboard</a></li>
    <li id="two"><a>My Account</a></li>
    <li id="three"><a>Direct Messages</a></li>
</ul>

我如何修改脚本，以便根据悬停的子项，它将使用基于索引的颜色ink类进行动画制作。

我也想在动画停止后将背景颜色设置为该颜色。

我尝试了以下操作，它只是不断添加新的跨度：https://jsfiddle.net/9u0ggeLL/4/

首先，您可以将要使用的颜色数组添加到代码中：

var colors = ['red','blue','green'];

然后在hover处理程序中，您可以使用您已经可以访问的index变量从数组中分配颜色：

ink.css('background-color', colors[index]);

工作示例

或者，如果将颜色分配给CSS中的父元素，然后在JS代码中读取它们，它将更具可扩展性，也更易于维护，如下所示：

#one { color: #C00; }
#two { color: #0C0; }
#three { color: #00C; }

ink.css('background-color', parent.css('color'));

工作示例

相关文章：