Question

我在右上边框创建了一个带有小CSS箭头的简单框。当.item_add上的悬停事件被触发（http://jsfiddle.net/357nf0ht/6/）时，此框将通过JS显示。

但问题出在这里：当你在.arrow上慢慢移动鼠标时，它会变得混乱。我认为这是因为箭头在容器之外。所以我希望HTML / CSS布局有所改进来解决这个问题＆＃39;。

<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

您可以使用CSS动画而不是JS / jQuery动画（CSS动画是硬件加速，JS动画不是）。如果将鼠标悬停在子元素上，jQuery将触发一个新的mouseenter / mouseleave事件。使用CSS :hover，您不会遇到此问题。

小心使用正确的转换持续时间和延迟。我还将箭头更改为:after伪元素，这样可以节省一些代码。

将max-height的{{1}}属性设置为某个较大的值，以确保所有内容都可见。

在这个小提琴中查看：http://jsfiddle.net/7n9jxo9c/

#item_add:hover .body

Answer 2

我试图摆弄它，如果你只是检查盒子是否已经动画，它似乎正确显示。以下是我对您的代码所做的更改：

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

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

2 个答案: