带有 CSS 变量冒泡的 JavaScript 鼠标位置剪辑路径效果

Question

我想从这个网站http://fleurmoreau.fr/重新创建文本颜色叠加剪辑路径效果

我在这里制作了一个版本https://codepen.io/Kerrys7777/pen/eYOrwbV。看起来还可以，但是悬停在某些区域似乎会导致冒泡效果？我可以更改哪些内容以使其流畅且实用？

我正在关注教程https://www.youtube.com/watch?v=l_ahowxmqzg但使用纯 JavaScript。

我认为 'mouseout' 函数/方法导致了这个（冒泡）问题？