Javascript A HREF链接不适用于不断变化的内部跨度

看看这个JSFIDLE：

基本上，我对一些文本应用了彩虹效果。 我也希望能够将此文本链接到另一个网页。 但是，单击链接不起作用。 JSFiddle会发出警报来说明我的观点

---

如果我们将

animateInterval

从

125

增加到

500

，它将重新开始工作。这里到底是什么问题？我们如何解决它以使链接始终工作？

通过更改

.test

元素上的

z-index

，它将工作

a {
  position: relative;
  z-index: 1;            /*  Edge/IE wanted this too for it to work  */
}
.test {
  position: relative;
  z-index: -1;
}