当鼠标越过绝对元素和父元素之间的间隙时，将鼠标悬停

Question

我有2个元素，外部和内部。

内部元素绝对定位，并在其与其父级（外部）之间留下间隙。

当外部元素被悬停时，我正在使用jQuery .hover()来显示内部元素。

但是由于鼠标越过差距的绝对位置触发了悬停。我怎么能避免这个？

这是JSFiddle demo。

HTML：

<div class="outer">
    <div class="inner">
    </div>
</div>

CSS：

.outer {
    background: green;
    width: 500px;
    height: 200px
}

.inner {
    background: red;
    width: 500px;
    height: 100px;
    position: absolute;
    top: 300px;
    display: none;
}

jQuery的：

$('.outer').hover(function () {
    $('.inner').show();
}, function () {
    $('.inner').hide();
});

Answer 1

您可以添加超时以延迟隐藏一点。在此延迟期间，用户可以用鼠标跳过间隙。

如果您需要一个例子，请告诉我：）

Answer 2

作为一个纯CSS解决方案，您可以使用透明 .inner为.outer填充border-top和.inner元素之间的空白

并使用background-clip: padding-box; CSS声明，以防止background落后于border：

.inner {
    background-color: red;
    background-clip: padding-box;
    height: 100px;

    position: absolute;
    top: 200px;                          /* Visual top value ---      */
                                                               |
    border-top: 100px solid transparent; /*   200px + 100px = 300px
                                               |        |
                          The real top value ---        --- The gap   */
    display: none;
}

然后使用the jQuery .hover() method或CSS :hover pesudo-class显示.inner元素，如下所示

.outer:hover .inner {
    display: block;
}

<强> WORKING DEMO