spawn div в случайной позиции с помощью функции наведения, Jquery

Question

Я пытаюсь создать сайт, содержащий div, который меняет свою позицию на случайную, используя функцию наведения jquery.Пока что единственный способ заставить его работать - применить функцию к отдельной фиксированной кнопке, которая перемещает div при наведении на него курсора.

Почему я не могу просто применить ту же функцию javascript к классу div "rand"?

Я пытаюсь создать сайт, содержащий div, который меняет свою позицию на случайное местоположениеиспользуя функцию наведения jquery.Пока что единственный способ заставить его работать - применить функцию к отдельной фиксированной кнопке, которая перемещает div при наведении на него курсора.

Почему я не могу просто применить ту же функцию javascript к классу div "rand"?

$('.new_pos').hover(function() {
  var bodyWidth = document.body.clientWidth
  var bodyHeight = document.body.clientHeight;
  var randPosX = Math.floor((Math.random() * bodyWidth));
  var randPosY = Math.floor((Math.random() * bodyHeight));
  var posLog = document.getElementById('pos_log');
  var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY;

  $('#rand_pos').css('left', randPosX);
  $('#rand_pos').css('top', randPosY);

  posLog.innerHTML = posXY
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rand_pos" class="rand"><img src="Media/MargeDancing_Test01.gif"></div>
<button class="new_pos">Remember</button>

Я получил исходный код с этого сайта: https://codepen.io/kaypooma/pen/tAfwm

Answer 1

У div нет свойства position, поэтому верхний и левый не имеют никакого эффекта.

#rand_pos {
  position: relative;
}

https://jsfiddle.net/calder12/54qfvgnm/1

Я бы также предложил использовать наведение мыши вместо наведения,при наведении немного менее облупленный

https://jsfiddle.net/calder12/54qfvgnm/2/