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

Question

工作 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/

Answer 1

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

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

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

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

Working example

或者，如果您将颜色分配给 CSS 中的父元素，然后在 JS 代码中读取它们，这样会更易于扩展且更易于维护，如下所示:

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

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

Working example