Question

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]);

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

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

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