title: JS - Scroll a hover-related div
body: <p>I've a couple div that allow you to hover over <code>#HoverMe</code> in order to see contents in <code>#hidden</code> div(that's hidden when un-hovered). If the list is a bit to long, it's scrollable. However, I can't scroll it while I'm hovering <code>#HoverMe</code> div. If I want to scroll <code>#Hidden</code> div, then I've to move, which result it disappearing again(obviously). </p>
  
  <p>I would like to be able to hover <code>#HoverMe</code> and have lke 5 seconds to move to <code>#hidden</code>. If you hover <code>#hidden</code> before disappearing, it will stop the hide timer and be able to scroll and check the contents.</p>
  
  <p><em>A possible worse alternative solution:</em></p>
  
  <p>scroll <code>#Hidden</code>div while mouse is at <code>#HoverMe</code>?</p>
  
  <p>How it looks like: </p>
  
  <pre><code>                      ------------     --------- _
                       |  #HoverMe   |  | #hidden |S|                           
                        ------------    | --------|R|
                                        | car.name|O|       
                                        |---------|L|
                                        | car.name|L|
                                         ---------|B|
                                        | car.name|A|
                                        |---------|R|
                                        | car.name| |
                                         ---------|_|
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="HoverMe" style="width: 100px; background: green"&gt;
          Car
      &lt;/div&gt;
      &lt;div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none"&gt;
  
          @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
              &lt;div&gt;@car.Name&lt;/div&gt;
         }
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
      var hoverEle = document.getElementById("HoverMe");
      var popupEle = document.getElementById("hidden");
  
      hoverEle.addEventListener('mouseover', function () {
          var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
          popupEle.style.left = (hoverRect.right + 16) + "px";
          popupEle.style.top = hoverRect.top + "px";
          popupEle.style.display = "block";
  
      }, false);
  
      hoverEle.addEventListener('mouseout', function () {
          popupEle.style.display = "none";
      }, false);
  &lt;/script&gt;
  </code></pre>