How can I independently detect hover on 2 partially overlapping <div>s?

Question

My situation is this: I have 2 partially overlapping divs that each have hover effects: Div 1 - Contains a bar chart, the bars in which have effects on hover. Div 2 - Is an area that spans the bottom 20% of the screen and when the user hovers over it (e.g. near the bottom of the screen) a control slides up from the bottom to allow them to change global properties to the table.

I want the browser to independently detect hover on either object, but what is happening is that whatever object is on top detects hover, but the other does not. I've found a bunch of almost related questions, but nothing that seems to answer this.

This is for a prototype, so hacky answers/answers that work only in one browser (preferably Chrome) are fine. Also solutions using CSS, jQuery, or JS are all OK.

Edit: added a fiddle that I think will illustrate my problem: http://jsfiddle.net/Gkgrx/

So if you hover to the bottom of the "table" (big red square that turns green on hover), when I hit the area that causes the table control to slide up (which it does) the table loses its hover state - I want it to still detect the hover.

Evidently I need to cut and paste the code here:

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

Thanks

Answer 1

Consider two elements, where the second one (green) is relatively positioned on top of the first one (yellow).

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

This is the problem: Problem

When you mouse over the yellow and green elements, it works great.

But if you are over the overlaped area, only the green div detects it, because the green is on top of the yellow.

The solution is to do a mousemove on the green, and temporarily hide it in order to read if there is any element at the current mouse position, then immediately show it back again. If there is some element underneath, then just trigger that element's mouseover.

Solution

Now, when you mouse over the overlaped area, both elements are notified.

---

EDIT

Now that you posted your fiddle, I can see your problem. You cannot "force" pseudo-classes as hover to happen on elements. You can check the specs here.

The easiest workaround, is to add another class myhover as

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

and show it or removed it, when you enter or exit respectively.

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

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

I think you got the idea. .table:hover is used naturally when the mouse is over the .table element. .table.myhover is used "artificially" when the mouse is over an element that overlaps the .table.

It was hard to understand where your .controlhover was, so I added a blue border. Tip: You don't need to specify bottom: 0px in your css. 0px is the same as 0em, 0 whatever, so just use bottom:0 and top:0 and so on.