title: Javascript detect if hover is on bottom or top padding of element
body: <p>I know it might sound like a weird question but I have some items in a list with the following HTML:</p>
  
  <pre><code>&lt;div class="list-cards"&gt;
      &lt;div class="list-item"&gt;
          &lt;a class="list-card" draggable="true"&gt;item&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="list-item"&gt;
          &lt;a class="list-card" draggable="true"&gt;item&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="list-item"&gt;
          &lt;a class="list-card" draggable="true"&gt;item&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.list-item {
    padding: 4px 0px;
  }
  </code></pre>
  
  <p>.list-cards = my list<br>
  .list-item = 1 list-item<br>
  .list-card = simply the style and text of an item (not important for this question)</p>
  
  <p>Now I want to detect whether, when hovering, I'm hovering on the padding-top of my list-item div or on the padding-bottom. <br>(maybe there is a way to get the full height of my item and then use some kind of mouse coordinate to know my 'height' (=position of mouse)? If there is then I have no idea how to do this</p>
  
  <p><strong>For backstory</strong>: <br>I'm making some kind of drag &amp; drop to-do list as a project. I can drag my items between x amount of lists but I always just append the item to the bottom of the list.<br> Now I want to use the padding of my list-item to check if I'm above or below an item<br>
  If I know that I can add the item that I'm dragging around either above or below an item depending on where I released my mouse button</p>
  
  <p>I would prefer a solution using vanilla javascript but if jQuery is required then that's fine too. Other frameworks/libraries I'd prefer not to touch</p>
  
  <p>Once again, thanks in advance</p>