如何独立检测悬停在 2 个部分重叠的 <div> 上？

Question

我的情况是这样的：我有 2 个部分重叠的 div，每个 div 都有悬停效果： Div 1 - 包含一个条形图，其中的条形对悬停有影响。 Div 2 - 是一个跨越屏幕底部 20% 的区域，当用户将鼠标悬停在它上面时（例如靠近屏幕底部），一个控件会从底部向上滑动，以允许他们将全局属性更改为表格。

我希望浏览器独立检测悬停在任一对象上，但发生的情况是顶部的任何对象都检测到悬停，而另一个则没有。我发现了一堆几乎相关的问题，但似乎没有任何答案。

这是一个原型，所以只能在一个浏览器（最好是 Chrome）中工作的 hacky 答案/答案是可以的。使用 CSS、jQuery 或 JS 的解决方案也都可以。

编辑：添加了一个我认为可以说明我的问题的小提琴：http://jsfiddle.net/Gkgrx/

因此，如果您将鼠标悬停在“表格”的底部（悬停时变为绿色的大红色方块），当我点击导致表格控件向上滑动的区域（确实如此）时，表格将失去其悬停状态- 我希望它仍能检测到悬停。

显然我需要在这里剪切和粘贴代码：

CSS：

.controlhover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 150px;
    z-index: 1;

}

.tablecontrol {
    position:absolute;
    bottom: 0px;
    left: 200px;
    right: 200px;
    background-color: #242D2F;
    opacity: .9;
    height: 70px;
    color: #FFFFFF;
}

.table {
    position: absolute;
    top: 0px;
    left: 50px;
    right: 50px;
    height: 500px;
    background-color: red;
}

.table:hover {
    background-color: green;
}

HTML：

<div class="table">This is a table that does stuff on hover</div>
<div class="controlhover"></div>
<div class="tablecontrol">This is the sliding control element</div>

JS：

$('.tablecontrol').slideUp();
$('.controlhover').hover(function(){
  $('.tablecontrol').slideDown()
}, function() { 
  $('.tablecontrol').slideUp();
});

谢谢

Answer 1

考虑两个元素，其中第二个（绿色）相对位于第一个（黄色）之上。

<div id="yellow"></div>
<div id="green"></div>

这是问题所在：Problem

当您将鼠标悬停在黄色和绿色元素上时，效果很好。

但如果您在重叠区域上方，则只有绿色 div 会检测到它，因为绿色位于黄色之上。

解决方法是在绿色上做一个mousemove，并暂时隐藏它以便读取当前鼠标位置是否有任何元素，然后立即再次显示。如果下面有某个元素，则只需触发该元素的mouseover。

Solution

现在，当您将鼠标悬停在重叠区域上时，两个元素都会收到通知。

---

编辑

现在你发布了你的小提琴，我可以看到你的问题。您不能“强制”将伪类作为 hover 发生在元素上。 You can check the specs here.

最简单的解决方法是添加另一个类myhover

.table:hover,
.table.myhover {
    background-color: green;
}

并在您进入或退出时分别显示或删除它。

$('.controlhover').hover(function () {
    $('.table').addClass('myhover');
}, function () {
    $('.table').removeClass('myhover');
});

http://jsfiddle.net/Gkgrx/1/

我想你明白了。当鼠标悬停在.table 元素上时，自然会使用.table:hover。当鼠标悬停在与.table 重叠的元素上时，会“人为地”使用.table.myhover。

很难理解你的.controlhover 在哪里，所以我添加了一个蓝色边框。 提示：您不需要在 css 中指定 bottom: 0px。 0px 和 0em 一样，0 什么的，所以只要使用bottom:0 和top:0 等等。

Answer 2

您必须通过 z-index 手动设置哪个在顶部，或者更改您的页面结构，这样您就不会有两个 Div 重叠 w/hover 操作。

在不知道您确切的页面结构的情况下.. 我会修改底部控制幻灯片的位置或确保它在可见时被定义为顶部.. 然后隐藏/折叠并将其移到后面。

祝你好运。