0

我认为这很容易 - 使用 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/

4

1 回答 1

1

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

js小提琴。

于 2013-06-01T12:34:35.357 回答