下导航菜单

动画图标我以前问这个项目的一些问题。我已经创建了一个模拟网页，作为课堂评估的一部分。下导航菜单

你可以在这里我github上找到页面：dtarvin.github.io/davidTarvinEvaluation/index.html

有在页面的右下角有一个导航菜单。当突出显示在菜单项中的一个，一爪子图标滑动菜单中的项目下，菜单项垂直向上移动。然后，当你移动到另一个项目，爪子幻灯片到下一个项目，垂直地向上移动，而前一个项目移到回落到原来的位置。

两个问题：首先，当我有一个项目下的爪子，如果我有我的光标指向菜单项停留在高度提出的爪子的左侧或右侧。但是，如果我的指针是在爪子本身，菜单项返回到原来的位置。我该如何解决？第二，当我从一个菜单项移动到另一个菜单项时，比如从主页到关于，在主页从它下面移出之前，主页将下降，以便最终拖拽单词Home。有没有办法解决这个问题，这样不会发生？

谢谢！

来源

2017-04-11 David Tarvin

你的第一个问题是一个z-index的问题上，爪子上的文字之上，但悬停只触发上的文字，所以无论是应用悬停爪子一样好，甚至移到高于文本爪子。你的第二个问题是时间问题，我认为过渡期延迟可以解决。 – Slime

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; 
}

来源

2017-04-12 03:27:00 c01gat3

回答

相关问题