当鼠标越过绝对元素和父元素之间的间隙时，悬停。
提问于 2014-02-16 14:07:57
我有两个元素，一个外部和一个内部。
内部元素是绝对定位的，并在和它的父元素(外部)之间留下了一个空白。
当外部元素悬停时，我使用jQuery .hover()来显示内部元素。
但是由于绝对定位的，当鼠标经过间隙时，会触发悬停。我怎么才能避免这种情况？
这是JSFiddle演示。
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();
});
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-16 14:53:13
作为一种纯CSS解决方案，您可以通过为.inner使用透明的 border-top来填补.inner和.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;
}然后使用方法或CSS :hover pesudo类显示.inner元素，如下所示
.outer:hover .inner {
display: block;
}工作演示。
Stack Overflow用户
发布于 2014-02-16 14:09:14
您可以添加超时以延迟隐藏一点。在此延迟期间，用户可以跳过鼠标的间隙。
如果你需要一个例子，就告诉我:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21817364
复制相关文章
点击加载更多
腾讯云开发者
