在<ul>的<li>子元素中也观察到了悬停的弹跳效应。
在<ul>的<li>子元素中也观察到了悬停的弹跳效应。
提问于 2013-01-03 12:13:17
好的，在经历了大量的压力和咖啡之后，我带着这段代码在链接上方盘旋，显示了一些对子元素的弹跳效果。当鼠标离开链接时，子元素在延迟4秒后隐藏起来。这4秒的延迟是因为在链接上悬停后，人们倾向于立即将鼠标悬停在下拉菜单上，并且由于弹跳效果，在和
- 元素，当你悬停在空隙上时，掉下的菜单就消失了，所以网站上的访问者不会知道他们必须等待反弹停止才能在菜单上盘旋，所以我引入了延迟4秒的方法。现在的问题是，当我立即尝试移动掉菜单上的鼠标时，弹跳效果就会在子元素上再现，我的意思是弹跳效果会发生两次，这只能通过立即悬停在被丢弃的菜单上，特别是在菜单中的第一个选项上盘旋。因此，这看起来很难看，同时也显示了糟糕的编码，是否有办法阻止这种情况的发生。我还想知道是否有一种使用jQuery切换可见性的方法，我不能使用显示选项，也不能使用removeClass函数。我知道，听起来可能不太严格，但是为了保持代码的流畅性，我需要处理以上两件事。演示 HTML代码：
回答 1
Stack Overflow用户
发布于 2013-01-03 13:10:20
给父母动画怎么样--比如：
ul.menu > li:hover {
visibility:visible;
animation:parentmove 1.2s linear; /* W3 Standart */
-moz-animation:parentmove 1.2s linear; /* Firefox */
-webkit-animation:parentmove 1.2s linear; /* Safari and Chrome */
}
@keyframes parentmove
{
0% {padding-bottom:5px;}
10% {padding-bottom:30px;}
30% {padding-bottom:55px;}
60% {padding-bottom:30px;}
80% {padding-bottom:55px;}
90% {padding-bottom:40px;}
95% {padding-bottom:30px;}
100% {padding-bottom:5px;}
}http://jsfiddle.net/kGqRM/187/
其中，填充以与子菜单移动相同的速度添加到父菜单的底部。
不幸的是，这意味着li必须是块元素并向左浮动(这样元素实际上就被正确地呈现了--如果您当前检查您的li，它似乎都压缩到左边，这就是当您试图进入子元素时离开它的原因)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14138715
复制相关文章
相似问题
腾讯云开发者
