title: How to convert following JS to JQuery?
body: <p>I'm having a hard time converterting the following JS to JQuery.</p>
  
  <p>My project have a <code>#HoverMe</code> div where I hover it to display the content inside <code>#hidden</code> div.</p>
  
  <p>I've a well working JS script from ( <a href="https://stackoverflow.com/questions/39939485/js-scroll-a-hover-related-div/39939793?noredirect=1#comment67161305_39939793">this question, by anied</a>). I tried to re-write <code>document.getElementById("HoverMe");</code> to <code>$("#HoverMe").hover(function() {</code> etc, but I can't go any further as  my understanding in jQuery is zero. </p>
  
  <p>This is how my divs look like</p>
  
  <pre><code>                      ------------     --------- _
                       |  #HoverMe   |  | #hidden |S| //hover #HoverMe to display #hidden                           
                        ------------    | --------|R|
                                        | car.name|O|       
                                        |---------|L|
                                        | car.name|L|
                                         ---------|B|
                                        | car.name|A|
                                        |---------|R|
                                        | car.name| |
                                         ---------|_|
  &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;
  </code></pre>
  
  <p><strong>How to convert following JS to JQuery?</strong>
      </p>
  
  <pre><code>    var hoverEle = document.getElementById("HoverMe");
      var popupEle = document.getElementById("hidden");
      var timeoutId;
  
      function showPopup() {
          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";
      }
  
      function hidePopup() {
          popupEle.style.display = "none";
      }
  
      hoverEle.addEventListener('mouseover', function () {
          showPopup();
      }, false);
  
      hoverEle.addEventListener('mouseout', function () {
          timeoutId = window.setTimeout(function () {
              hidePopup();
          }, 1500);
      }, false);
  
      popupEle.addEventListener('mouseover', function () {
          if (timeoutId) {
              window.clearTimeout(timeoutId);
          }
      }, false);
  
      popupEle.addEventListener('mouseout', function () {
          timeoutId = window.setTimeout(function () {
              hidePopup();
          }, 1500);
      }, false);
  
  &lt;/script&gt;
  </code></pre>