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

my situation this: have 2 partially overlapping divs each have hover effects: div 1 - contains bar chart, bars in have effects on hover. div 2 - area spans bottom 20% of screen , when user hovers on (e.g. near bottom of screen) control slides bottom allow them change global properties table.

i want browser independently detect hover on either object, happening whatever object on top detects hover, other not. i've found bunch of related questions, nothing seems answer this.

this prototype, hacky answers/answers work in 1 browser (preferably chrome) fine. solutions using css, jquery, or js ok.

edit: added fiddle think illustrate problem: http://jsfiddle.net/gkgrx/

so if hover bottom of "table" (big red square turns green on hover), when hit area causes table control slide (which does) table loses hover state - want still detect hover.

evidently need cut , paste 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 table stuff on hover</div> <div class="controlhover"></div> <div class="tablecontrol">this sliding control element</div> 

js:

$('.tablecontrol').slideup(); $('.controlhover').hover(function()  {$('.tablecontrol').slidedown()}, function() {$('.tablecontrol').slideup();}); 

thanks

consider 2 elements, second 1 (green) relatively positioned on top of first 1 (yellow).

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

this problem: problem

when mouse on yellow , green elements, works great.

but if on overlaped area, green div detects it, because green on top of yellow.

the solution mousemove on green, , temporarily hide in order read if there element @ current mouse position, show again. if there element underneath, trigger element's mouseover.

solution

now, when mouse on overlaped area, both elements notified.

---

edit

now posted fiddle, can see problem. cannot "force" pseudo-classes hover happen on elements. you can check specs here.

the easiest workaround, add class myhover as

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

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

$('.controlhover').hover(function () {     $('.table').addclass('myhover'); }, function () {     $('.table').removeclass('myhover'); }); 

http://jsfiddle.net/gkgrx/1/

i think got idea. .table:hover used naturally when mouse on .table element. .table.myhover used "artificially" when mouse on element overlaps .table.

it hard understand .controlhover was, added blue border. tip: don't need specify bottom: 0px in css. 0px same 0em, 0 whatever, use bottom:0 , top:0 , on.