css - 避免 child 干扰 parent 的盘旋。 (或者如何 .stop(false,true) 一个CSS转换)

Question

当我使用 jQuery .animate() 制作动画时。我总是注意使用 .stop(false,true) 来避免奇怪的动画行为。

在这种情况下，我想让导航出现在某些部分的悬停上。这是一个演示:

http://jsfiddle.net/meo/Kbeg8/

现在，如果您慢慢悬停顶部的灰色元素，您将得到一个无限动画循环，因为飞入的元素是触发动画的元素的子元素。

因为这不是我第一次遇到这种困难:有没有纯 CSS 方法可以避免这种情况？ (像 child 不触发 parent 转换)如果现在，你会如何用JS解决？

Answer 1

是的，有一种纯 CSS3 方法可以做到这一点。您需要的属性(property)是pointer-events

添加

nav ul {
    pointer-events:none;
}
nav:hover ul {
    pointer-events:auto;
}

似乎在 Chrome 14 中为我修复了它。