javascript - 导航菜单下的图标动画

Question

我之前问过一些关于这个元素的问题。我创建了一个模拟网页作为类评估的一部分。

您可以在我的 github 上找到该页面:dtarvin.github.io/davidTarvinEvaluation/index.html

页面右下角有一个导航菜单。当您突出显示某个菜单项时，爪子图标会滑入菜单项下方，并且菜单项会垂直向上移动。然后，当您移动到另一个元素时，爪子会滑动到下一个元素，该元素会垂直向上移动，而前一个元素会向下移动回其原始位置。

两个问题:首先，当我将爪子放在某个元素下时，如果我将光标指针指向爪子的左侧或右侧，则菜单项的高度会保持升高。但是，如果我的指针位于爪子本身上，则菜单项将返回到其原始位置。我该如何解决这个问题？

其次，当我从一个菜单项移动到另一个菜单项时，例如从“主页”移动到“关于”，在爪子从其下方移出之前，“主页”就会下降，因此爪子最终会拖过“主页”一词。有什么办法可以修复它，这样就不会发生这种情况吗？

谢谢!

Answer 1

1) 将pointer-events: none;的css属性添加到#paw。

#paw {
    //other properties...
    pointer-events: none;
}

2) 在未悬停时为 li span 添加一个 top 属性值，并添加转换延迟。

li span {
    position: relative;
    transition: top .5s 0.5s; //this has a 0.5s delay
    top: -0vh;
}