如何在2个部分重叠的 s上独立检测hover？
我的情况是这样的：我有两个部分重叠的div，每个都有hover效果：Div 1 – 包含一个条形图，其中的条形图对hover有影响。 Div 2 – 是一个横跨屏幕底部20％的区域，当用户将鼠标hover在屏幕底部时（例如靠近屏幕底部），控件从底部向上滑动，以允许它们将全局属性更改为表格。
我希望浏览器能够独立地检测任何一个对象上的hover，但是发生的事情是顶部的任何对象检测到hover，但另一个没有。 我发现了一堆几乎相关的问题，但似乎没有回答这个问题。
这是一个原型，所以只能在一个浏览器（最好是Chrome）中工作的hacky答案/答案都可以。 使用CSS，jQuery或JS的解决方案也都可以。
编辑：添加了一个小提琴，我认为将说明我的问题： http ： //jsfiddle.net/Gkgrx/
因此，如果你徘徊在“桌子”的底部（hover时变为绿色的大红色方块），当我击中导致桌面控件向上滑动的区域（它确实）时，桌子会丢失其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：
This is a table that does stuff on hover This is the sliding control element
JS：
$('.tablecontrol').slideUp(); $('.controlhover').hover(function() {$('.tablecontrol').slideDown()}, function() {$('.tablecontrol').slideUp();});
谢谢
考虑两个元素，其中第二个元素（绿色）相对位于第一个元素（黄色）的顶部。
这是问题： 问题
当您将鼠标hover在黄色和绿色元素上时，效果很好。
但是如果你在重叠区域上方，只有绿色div检测到它，因为绿色位于黄色顶部。
解决方案是在绿色上进行鼠标移动，暂时隐藏它以便读取当前鼠标位置是否有任何元素，然后立即再次显示。 如果下面有一些元素，那么只需触发该元素的mouseover 。
解
现在，当您将鼠标hover在重叠区域上时，会通知这两个元素。
编辑
现在你发布了你的小提琴，我可以看到你的问题。 你不能“强迫”伪类作为hover发生在元素上。 你可以在这里查看规格。
最简单的解决方法是添加另一个myhover类
.table:hover, .table.myhover { background-color: green; }
分别进入或退出时显示或删除它。
$('.controlhover').hover(function () { $('.table').addClass('myhover'); }, function () { $('.table').removeClass('myhover'); });
我想你明白了。 .table:hover在.table元素上时自然使用.table:hover 。 当鼠标位于与.table重叠的元素上时，“人工”使用.table 。
很难理解.controlhover位置，所以我添加了一个蓝色边框。 提示：您不需要在css中指定bottom: 0px 。 0px与0em相同，0无论如何，所以只需使用bottom:0和top:0 ，依此类推。
您必须通过z-index手动设置哪个位于顶部或更改您的页面结构，以便您没有两个Div重叠w / hover操作。
在不知道你的确切页面结构的情况下..我会修改底部控制幻灯片的位置或确保它在可见时被定义为顶部..然后隐藏/折叠并将其移动到后面。
祝好运。