JS-hover副作用与div之外的元素

Question

I created a simple box with a small CSS-arrow at the upper right border. This box will be displayed via JS as a hover event over .item_add is triggered ( http://jsfiddle.net/357nf0ht/6/ ).

But here is the problem: As you move the mouse slowly over the .arrow it gets messed up. I think it is because of the fact, that the arrow is outside of the container. So I hope there is a improvement in the HTML/CSS Layout to solve this 'bug'.

<div id="item_add">
    <header>X</header>
    <div class="body">
        Content
    </div>
    <div class="arrow"></div>
</div>

CSS:

#item_add {
    display: none;
    position: absolute;
    left: 5.5em;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;
}
#item_add .body {
    display: none;
}
#item_add .arrow {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}

Answer 1

You could use CSS animations instead of JS/jQuery animations (CSS animations are hardware accelerated, JS animations not). jQuery fires a new mouseenter/mouseleave event if you hover over a child element. With the CSS :hover you don't get this issue.

Be careful to use the correct transition durations and delays. I also changed the arrow to the :after pseudo element which saves some code.

Set the max-height attribute of #item_add:hover .body to some big value to ensure that everything is visible.

Check it out in this fiddle: http://jsfiddle.net/7n9jxo9c/

#item_add {
    ...
    transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}

#item_add:hover {
    width: 7em;
    left: .5em;

    transition-delay: 0s;
}

#item_add:hover .body {
    max-height: 100px;
    visibility: visible;

    transition-delay: 200ms;
}

#item_add .body {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;

    transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}

#item_add:after {
    content: '';
    ...
    /* same as #item_add .arrow */
}

Answer 2

I tried fiddling around it and it seems to show correctly if you just check if the box is allready animated. Heres the change i made to your code:

$(document).on('mouseenter', '#item_add', function( event ) {
    var isAnimating = $(this).is(':animated');
    if(isAnimating == false){
        $(this).animate({ "width": '7em', "left": '.5em' }, 200, function(){
            $(this).find(".body").slideDown(200);
        });
    }
}).on('mouseleave', '#item_add', function( event ) {
    var menue = $(this);
    var isAnimating = menue.is(':animated');
    if(isAnimating == false){
        menue.find(".body").slideUp(200, function() {
            menue.animate({ "width": '2em', "left": '5.5em' }, 200);    
        }); 
    }
});