jQuery菜单幻灯片悬停故障

Question

I made a menu with < divs > and am using mouseover mouseout functions to append and remove a tongue (like a description for each menu icon). The issue I am having is when I hover over the tongue, it executes (correctly) the mouseout function for the button and removes the tongue.

How can I prevent this? Thank you!

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();
    });
}); 

Bonus: The text also is affected by the width animation. Any way to fix that?

Answer 1

DEMO

You can do the following to make your code work as expected.

• Use mouseleave event instead of mouseout this will make sure child elements are detected as part of parent element and the event will only trigger when mouse leave element and it's child element.

• Similarly change mouseover event with mouseenter this event will only trigger if cursor enter element or its child.

• To avoid text from collapsing use white-space: nowrap; on .tongue class.

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();
    });
});

PS: Try to avoid class names like .1, .2, .3 they might work in java-script but they wont work in CSS.

CSS does not allow class names which start with numbers, instead you can try .n_1, .n_2, .n_3 ....

Answer 2

You don't really need JavaScript for this, depending on the level of support you need.
I made an example in which I altered the HTML structure a bit, to make it a bit more semantic IMO.
Animation wouldn't work in old IE, but functionality will (IE8).

HTML:

<ul class='wrapper'>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
    <li class="button">Test</li>
</ul>

CSS:

.wrapper {
    width:50px;
    margin-left:40%;
    list-style: none;
    counter-reset: button-number
}

.button {
    counter-increment: button-number;
    width:50px;
    height:50px;
    background-color:#ccc;
    float: left;
    cursor:pointer;
    position: relative;
}

.button:before, .button:after {
    content:"Button number " counter(button-number);
    width:300px;
    height:50px;
    position:absolute;
    right: 50px;
    visibility: hidden;
}

.button:before {
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left;
    transform: scaleX(0);
    transform-origin: left;
    background-color:#000;
    color:#fff;
    -webkit-transition: -webkit-transform .4s, visibility 1s;
    transition: transform .4s, visibility 1s;
}

.button:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
}

.button:hover:after {
    width: 300px;
}

jsfiddle

Notes:

• The :after element is there to prevent the "tongue" from disappearing if the mouse leaves immediately to the left.
• Animating transform instead of width is better for performance (element is not re-drawn) and eliminates weird text-wrapping during the animation.