Image is not moving away from cursor-CodePudding

i have a image ,i want whenever cursor try to touch the image it moves away randomly from the cursor i tried using jquery but it not working , see this link http://jsfiddle.net/emreerkan/atNva/

my index.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
   


    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB VDvE9tvIXrMQaPlFFSUTR nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>

    <img src="https://images.pexels.com/photos/569986/pexels-photo-569986.jpeg?auto=compress&cs=tinysrgb&w=600" width="100" height="100" alt="Grey Square"  />
    
    
</body>
<!-- <script src="jquery-3.6.1.min.js"></script> -->
<script>
    alert('hi')
    jQuery(function($) {
    $('.som').mouseover(function() {
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX   'px', top: nextY   'px' });
    });
});
</script>
</html>

my style.css

body { position: relative; }
#img { position: relative; }

CodePudding user response：

in css use the pointer .som instead of #img because in your jQuey code you used top and left,these properties will not work unless the position property is set first, in this case its position:relative;

(static is the default value of position ) everything else looks good