Создать div в случайной позиции с помощью функции наведения, JQuery
Я пытаюсь создать веб-сайт, содержащий 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У div нет свойства position, поэтому верхнее и левое не имеют никакого эффекта.
#rand_pos {
position: relative;
}
https://jsfiddle.net/calder12/54qfvgnm/1
Я бы также предложил использовать наведение мыши вместо наведения, это немного менее нестабильно при наведении
https://jsfiddle.net/calder12/54qfvgnm/2/
И у вас этот div установлен как относительное положение? Это может быть HTML-парсер DreamWeaver, отличный текстовый редактор, но WYSIWYG - чушь.
Да, он установлен как относительный в документе CSS. У меня было много проблем с Dreamweaver, и это только второй веб-сайт, который я создал на нем, поэтому я могу просто попробовать переключить приложения.
Jk jk, я идиот, страница CSS не была связана. Отлично работает - спасибо!
Это именно то, что я пытаюсь сделать! И я вижу, что ваш код работает с jsfiddle, но когда я пытаюсь перенести его в Dreamweaver, у меня возникает та же проблема: элемент div остается зафиксированным в верхнем левом углу. Я даже попытался создать новый каталог, содержащий только ваш код и jquery-3.3.1, но у меня он все еще не работает. Возможно ли, что это проблема Dreamweaver?