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

Question

我的状况是这样的：我有两个部分重叠的div，每个div都有hover效果： Div1-包含一个条形图，其中的条在悬停时具有效果。 Div2-是一个区域，跨越屏幕底部20％，当用户悬停在其上（例如靠近屏幕底部）时，控件从底部滑出，允许他们更改表格的全局属性。

我希望浏览器能够独立检测任一对象的hover，但实际情况是在顶部的对象检测到hover，而另一个没有检测到。我找到了一堆几乎相关的问题，但没有一个似乎可以回答这个问题。

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

编辑：添加了一个我认为可以说明我的问题的fiddle：http://jsfiddle.net/Gkgrx/ 因此，如果你将鼠标悬停在“表格”的底部（变成绿色的大红色正方形），当我达到导致表控件滑动的区域时（它确实会滑动），表格失去了它的hover状态-我希望它仍然能够检测到hover。

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

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

谢谢

- user2484162

Answer 1

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

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

这是问题：问题 当你鼠标移到黄色和绿色元素上时，它运行得很好。

但是如果你在重叠区域上方，只有绿色div会检测到它，因为绿色在黄色上面。

解决方案是在绿色上执行mousemove，并且暂时隐藏它以读取当前鼠标位置是否有任何元素，然后立即将其显示回来。如果下面有某个元素，则触发该元素的mouseover。 解决方法 现在，当你鼠标移到重叠区域上时，两个元素都会被通知。

---

编辑 现在你发布了你的fiddle，我可以看到你的问题。你不能“强制”伪类如hover发生在元素上。 您可以在此处检查规范。 最简单的解决方法是添加另一个类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 等即可。

- Jose Rui Santos

Answer 2

你必须手动设置z-index来确定哪个在顶部，或者更改页面结构，使得你不会有两个Div重叠并带有hover动作。

不知道你的确切页面结构...我会修改底部控制滑块的位置，或者确保它在可见时定义为在顶部...然后隐藏/折叠并将其移至后面。

祝好运。

- Stan Smith

---

我觉得我的表述不够清晰：我需要两个部分有重叠的区域始终独立地检测悬停。实际控件在顶部（并且确实如此），但是周围的区域（悬停在其上会导致控件滑入）需要持续检测悬停。让我看看能否做一个演示... - user2484162