Javascript JS悬停副作用，元素位于div之外

我创建了一个简单的框，右上角有一个小CSS箭头。此框将通过JS显示为

上方的悬停事件。触发了item_add

）

但问题是：当你在

.arrow

上缓慢移动鼠标时，它会变得一团糟。我想这是因为事实，箭头在容器外面。因此，我希望HTML/CSS布局有一个改进来解决这个“bug”

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

---

我试着在它周围摆弄，如果你只是检查一下这个框是否已经准备好动画，它似乎显示正确。以下是我对您的代码所做的更改：

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

---

您可以使用CSS动画代替JS/jQuery动画（CSS动画是硬件加速的，JS动画不是）。如果将鼠标悬停在子元素上，jQuery将触发一个新的mouseenter/mouseleave事件。使用CSS

：hover

，您不会遇到此问题

注意使用正确的过渡持续时间和延迟。我还将箭头改为

：after

伪元素，它保存了一些代码

将

#item\u add:hover.body

的

max height

属性设置为某个大值，以确保所有内容都可见

在这把小提琴里看看：

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

#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 */
}