title: `div` not obeying event coordinates
body: <p>My current code is (courtesy <a href="https://stackoverflow.com/users/2560539/peter-darmis">Peter</a>):</p>
  <pre><code>$(document).ready(function() {
      $.ajax({
          type: 'GET',
          url: '', //contains a list of paths
          data: { get_param: 'value' },
          dataType: 'json',
          success: function (data) {
              element = data[0];
              $.each(data, function (index, element) {
                  $(&quot;.gallery&quot;).append($(`&lt;li&gt;&lt;img src=&quot;${`images/square/${element.path}`}&quot; 
                  alt=&quot;${element.title}&quot;id=&quot;${element.path}&quot;city=&quot;${element.city}&quot;
                  taken=&quot;${element.taken}&quot;/&gt;&lt;/li&gt;`));
              });
          },
      });
  });
  
  var df = $.Deferred();
  const xOffset = 3;
  const yOffset = 3;
  
  $(document).on('mouseenter', '.gallery li', function() {
      $(this).find('img').addClass(&quot;gray&quot;);
      var imgs = `&lt;div class=&quot;preview&quot;&gt; &lt;img src=&quot;images/medium/${$(this).find('img').attr('id')}&quot;
                  alt=&quot;${$(this).find('img').attr('alt')}&quot;/&gt;`;
      var info = `&lt;p&gt;
                  'Title': ${$(this).find('img').attr('alt')}&lt;br&gt;
                  'City': ${$(this).find('img').attr('city')}&lt;br&gt;
                  'Date Taken': ${$(this).find('img').attr('taken')}
                  &lt;/p&gt;&lt;/div&gt;`;
      imgs += info;
      // $(&quot;.images_append&quot;).html($(imgs));
      let imgObj = $(imgs);
      imgObj.attr(&quot;id&quot;, &quot;preview-&quot;+$(this).index());
      $(&quot;body&quot;).append(imgObj );
      df.resolve( true );
  });
  
  $.when( df ).done(function ( v ) {
      if(v) {
          $(document).on(&quot;mousemove&quot;, '.gallery li', function(event) {
              event.stopPropagation();
              $(&quot;#preview-&quot;+$(this).index())
                .css(&quot;top&quot;,((event.pageY) + xOffset)+&quot;px&quot;)
                .css(&quot;left&quot;,((event.pageX) + yOffset)+&quot;px&quot;);
          });
    
          $(document).on(&quot;mouseout&quot;, '.gallery li', function() {
              $(&quot;#preview-&quot;+$(this).index()).remove();
              $(this).find('img').removeClass(&quot;gray&quot;);
          });
      }
    });
  </code></pre>
  <p>Basically when mouse is hovered, load up a bigger image, and when it is removed, remove the <code>preview</code> class.</p>
  <p>Currently the output shows up like <a href="https://imgur.com/a/237EFmw" rel="nofollow noreferrer">this</a>. Images show up at the bottom for some reason and not following event coordinates from <code>mousemove</code>.</p>
  <p>Here's the CSS</p>
  <pre><code>#preview {
      position: absolute;
      padding: 10px 10px 0 10px;
      /* display: none; */
      background-color: #424242;
      /* z-index: 9999; */
      /* display: flex; */
  }
  #preview p {
      color: white; 
      margin-top: 3px;
      margin-bottom: 3px;
  }
  
  .gray {
       filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
  }
  </code></pre>
  <p>I'm basically not touching HTML. So it's a simple HTML page.</p>
  <p>Can you please suggest why is it not following these coordinates ?</p>