Jquery悬停在最低元素层

Question

例如，我得到了这个HTML：

<div id="div1">
    <div id="div2"></div>
</div>

div2是display：none。

还有一个jquery方法，用于在div1上触发一个悬浮div2的悬停函数。

像这样：

$('#div1').hover(function(){
    $('#div2').stop().fadeIn();
}, function(){
    $('#div2').stop().fadeOut();
});

我有一个更大的代码，但它太大而无法发布。我试过的每个功能都不太好用。我想仅在最低层元素div1上触发悬停。但主要是如果fadeIn()被触发并且光标在其上移动，则对div1的悬停效果结束。

是否有包含所有子元素的悬停功能？

Answer 1

如果我明白你想在父母徘徊时褪去所有孩子？

看到你在问题中标记了CSS，我会给出一个CSS答案：

Demo Fiddle

#div1 *{
   opacity:0;
   transition:opacity 200ms ease-in;
}
#div1:hover *{
   opacity:1;
}

Answer 2

如何使用Jquery的Nth Child选择器。我无法粘贴示例，因为我目前在外面。 但如果你读它，这应该有效。 http://api.jquery.com/nth-child-selector/