我之前问过一些关于这个元素的问题。我创建了一个模拟网页作为类评估的一部分。
您可以在我的 github 上找到该页面:dtarvin.github.io/davidTarvinEvaluation/index.html
页面右下角有一个导航菜单。当您突出显示某个菜单项时,爪子图标会滑入菜单项下方,并且菜单项会垂直向上移动。然后,当您移动到另一个元素时,爪子会滑动到下一个元素,该元素会垂直向上移动,而前一个元素会向下移动回其原始位置。
两个问题:首先,当我将爪子放在某个元素下时,如果我将光标指针指向爪子的左侧或右侧,则菜单项的高度会保持升高。但是,如果我的指针位于爪子本身上,则菜单项将返回到其原始位置。我该如何解决这个问题?
其次,当我从一个菜单项移动到另一个菜单项时,例如从“主页”移动到“关于”,在爪子从其下方移出之前,“主页”就会下降,因此爪子最终会拖过“主页”一词。有什么办法可以修复它,这样就不会发生这种情况吗?
谢谢!
最佳答案
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;
}
关于javascript - 导航菜单下的图标动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43352276/