javascript - jQuery 菜单滑动悬停故障

Question

我用 制作了一个菜单，并使用 mouseover mouseout 函数来添加和删除舌头(就像每个菜单图标的描述)。我遇到的问题是当我将鼠标悬停在舌头上时，它会(正确地)执行按钮的 mouseout 功能并移除舌头。

我该如何防止这种情况发生？谢谢!

http://jsfiddle.net/QZ75D/

$('#wrapper').on('mouseover', '.1, .2, .3, .4, .5', function(){
    var tongue = '<div class = "tongue">'+$(this).attr('value')+'</div>';
    $(tongue).appendTo($(this)).animate({width:"toggle"});
});
$('#wrapper').on('mouseout', '.1, .2, .3, .4, .5', function(){
    var that = $(this);
    $('.tongue').animate({width:"toggle"},function(){
        that.children('.tongue').remove();
    });
}); 

好处:文本也受宽度动画的影响。有什么办法可以解决这个问题吗？

Answer 1

DEMO

您可以执行以下操作以使您的代码按预期工作。

• 使用 mouseleave 事件而不是 mouseout 这将确保子元素被检测为父元素的一部分并且该事件仅在鼠标离开元素时触发并且它是子元素。

• 同样将 mouseover 事件更改为 mouseenter 此事件仅在光标进入元素或其子元素时触发。

• 要避免文本折叠，请在 .tongue 类上使用 white-space: nowrap;。

JS:

$('#wrapper').on('mouseenter', '.1, .2, .3, .4, .5', function () {
    var tongue = '<div class = "tongue">' + $(this).attr('value') + '</div>';        
    $(tongue).appendTo($(this)).animate({
        width: "toggle"
    });
});
$('#wrapper').on('mouseleave', '.1, .2, .3, .4, .5', function () {
    var that = $(this);
    $('.tongue').animate({
        width: "toggle"
    }, function () {
        that.children('.tongue').remove();
    });
});

附注:尽量避免类名，如 .1, .2, .3 它们可能适用于 java 脚本，但不适用于 CSS。

CSS 不允许类名以数字开头，您可以尝试 .n_1, .n_2, .n_3 ....