避免孩子和父母闲谈。(或如何.stop(false，true)一个css转换)

Question

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

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

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

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

因为这不是我第一次遇到这样的困难:是否有任何纯粹的CSS方法来避免这种情况？(就像孩子们不会触发父母的转变一样)如果现在，你怎么用JS解决这个问题呢？

Answer 1

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

添加

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

好像是用Chrome 14帮我修的。