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

【问题标题】：Hover out when mouse goes over the gap between absolute element and the parent当鼠标越过绝对元素和父元素之间的间隙时悬停
【发布时间】：2014-02-17 07:22:31
【问题描述】：

我有 2 个元素，一个 outer 和一个 inner。

inner 元素是绝对定位的，并在它与其父元素（outer）之间留下间隙。

我正在使用 jQuery .hover() 在 outer 元素悬停时显示 inner 元素。

但是由于绝对定位当鼠标越过间隙它触发悬停。我怎样才能避免这种情况？

这里是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();
});

【问题讨论】：

标签： jquery html css

【解决方案1】：

作为纯 CSS 解决方案，您可以使用 transparent border-top 来填充 .inner 和 .outer 元素之间的空白 .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.

【讨论】：

完美解决方案

【解决方案2】：

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

如果你需要一个例子，请告诉我:)

【讨论】：

我不认为超时会很好，因为它使用户的动作依赖于时间而不是运动
如果它不适合你，当你需要在间隙中添加一些具有相同背景的元素时。没有其他可能。