使用悬停功能在随机位置生成 div，Jquery答案

【问题标题】：spawn div in random position using hover function, Jquery使用悬停功能在随机位置生成 div，Jquery
【发布时间】：2018-11-03 02:41:48
【问题描述】：

我正在尝试制作一个包含 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 jquery function class button

【解决方案1】：

div 没有位置属性，因此 top 和 left 无效。

#rand_pos {
  position: relative;
}

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

我还建议使用鼠标悬停而不是悬停，悬停时不那么不稳定

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

【讨论】：

这正是我想要做的！而且我看到您的代码正在使用 jsfiddle，但是当我尝试将其引入 Dreamweaver 时，我遇到了同样的问题：div 元素仍然固定在左上角。我什至尝试创建一个只包含您的代码和 jquery-3.3.1 的新目录，但它仍然不适合我。这可能是 Dreamweaver 的问题吗？
你把那个 div 设置为相对位置？它可能是 DreamWeaver 的 HTML 解析器，它是一个很棒的文本编辑器，但它的所见即所得是垃圾。
是的，它在 CSS 文档中设置为相对。我在 Dreamweaver 上遇到了很多问题，这只是我在其上构建的第二个网站，所以我可以尝试切换应用程序。
Jk jk，我是个白痴，CSS 页面没有链接。效果很好 - 谢谢！