title: How can I independently detect hover on 2 partially overlapping <div>s?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>Edit: added a fiddle that I think will illustrate my problem: <a href="http://jsfiddle.net/Gkgrx/" rel="nofollow noreferrer">http://jsfiddle.net/Gkgrx/</a></p>
  
  <p>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.</p>
  
  <p>Evidently I need to cut and paste the code here:</p>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="table"&gt;This is a table that does stuff on hover&lt;/div&gt;
  &lt;div class="controlhover"&gt;&lt;/div&gt;
  &lt;div class="tablecontrol"&gt;This is the sliding control element&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.tablecontrol').slideUp();
  $('.controlhover').hover(function(){
    $('.tablecontrol').slideDown()
  }, function() { 
    $('.tablecontrol').slideUp();
  });
  </code></pre>
  
  <p>Thanks</p>