jQuery mouseenter/mouseeout 效果 - 不是第一次悬停答案

【问题标题】：jQuery mouseenter/ mouseeout effect - not with first hoverjQuery mouseenter/mouseeout 效果 - 不是第一次悬停
【发布时间】：2013-05-28 04:30:18
【问题描述】：

我认为这很容易 - 使用 jQuery 制作简单的悬停效果。但我对这段代码有奇怪的行为：

jQuery('.has-children').on({
    mouseenter: function () {
          jQuery(this).find('.sub-menu').fadeIn();
      },
    mouseleave: function () {
          jQuery(this).find('.sub-menu').fadeOut();
      }
});

完整代码：http://jsfiddle.net/cachaito/R5qnt/2/

加载页面后第一次悬停效果没有淡入淡出，只是普通的css悬停。下一个终于用 jQuery 淡入淡出。谁能给我解释一下？

更新

我也尝试过使用 jQuery .hover() 和 .fadeToggle();但它的行为也很奇怪，而且工作方式相反：mosueenter 隐藏 .sub-menu 而 mouseleave 显示内容：-/

jQuery('.has-children').hover(function () {
    jQuery(this).find('.sub-menu').stop(true, true).fadeToggle();
});

完整代码：http://jsfiddle.net/cachaito/R5qnt/5/

【问题讨论】：

标签： jquery mouseover fadein mouseleave fadeout

【解决方案1】：

您的 CSS 有 :hover 设置 display: block。这意味着您需要先在集合上调用hide()。

jsFiddle.

【讨论】：

只是好奇 - 如果这个解决方案可以应用于第二个代码（使用 .hover()） - 好的，它可以是：jsfiddle.net/cachaito/R5qnt/9