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

Question

我创建了一个简单的盒子，在右上角有一个小的 CSS 箭头。此框将通过 JS 显示为 .item_add 上的悬停事件被触发(http://jsfiddle.net/357nf0ht/6/)。

但这就是问题所在:当您将鼠标缓慢移到 .arrow 上时，它会变得困惑。我认为这是因为箭头在容器外部。所以我希望 HTML/CSS 布局有所改进以解决这个“错误”。

<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 伪元素，这样可以节省一些代码。

将 #item_add:hover .body 的 max-height 属性设置为一个较大的值，以确保所有内容都可见。

在这个 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 */
}