小编use*_*162的帖子

我的情况是这样的:我有2个部分重叠的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 …