jQuery悬停在父元素上但不包括子元素

Question

有没有办法使用jQuery与DOM交互，使得当用户将光标悬停在一个div上时，菜单出现，但是当他们将光标悬停在该父元素内的特定子元素上时，不会触发任何操作？

目前的代码如下：

$('#player_area:not(< #player_links)').live("mouseenter", function() {
  return $('#album_tracks').slideDown(200);
}).live("mouseleave", function() {
  return $('#album_tracks').hide();
});

- dennismonsewicz

---

请创建一个 http://jsfiddle.net/ 演示。mouseenter 和 mouseleave 应该按照您想要的方式工作。 - Felix Kling

这是 jsfiddle 链接：http://jsfiddle.net/q4beS/2/ - dennismonsewicz

嗯，当我删除 < 时，它似乎可以工作（无论如何，< 不是有效的选择器）。这是你想要的吗？http://jsfiddle.net/q4beS/4/ - Felix Kling

Answer 1

以下是您需要的内容：http://api.jquery.com/mouseover/

mouseenter和mouseleave方法。

查看示例演示；）

- Guillaume Cisco

Answer 2

问题是你是否不希望在子元素的mouseenter事件中重复执行该操作。也就是说，事件已经由父元素触发，你不希望在离开父元素之前再次执行它，或者你希望子元素不触发mouseenter（如果它已经定位在父元素之外）。

如果你仅仅删除:not选择器，你的代码似乎应该可以工作。

编辑...抱歉误解了...下面的fiddle应该可以解决你需要做的事情。

http://jsfiddle.net/q4beS/6/

- Stuart Wakefield

---

回答你的问题：是的，我只想让动作直接在父元素上发生，如果鼠标“进入”或“悬停”在父元素内的子元素上，则不会发生任何事情，或者如果 album_tracks div 是可见的，则隐藏该 div。 - dennismonsewicz

我最终简化了几乎所有的代码。我能够利用另一个已经为父级悬停事件设置好的div类。我只是将子元素与父元素分开，并重新定位了所有内容，现在一切都很好 :) - dennismonsewicz