title: Image follow the mouse, using mousemove event (using Jquery/Javascript)
body: <p>I want the image to follow along with the mouse when the mouse is move but when the mouse has clicked once anywhere the image stops following; it begins following when the mouse has clicked again</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="description" content="Mousemove"&gt;
      
      &lt;script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   $(document).ready(function() {
  
      $(document).click(function(e) {
       $(".image").mousemove({ top: e.pageY, left: e.pageX });
        });
        
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food"&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, when the mouse moves the image doesn't follow along with the mouse and I'm not able to click anywhere. Why is my code not working?</p>