javascript - 创建一个可移动的 div 元素

Question

当用户将鼠标悬停在段落标记中的 div 内的文本上时，我正在尝试创建一个移动的 div。发生这种情况时，我只想让 div 移动几个像素。我也不希望 div 在浏览器内滚动，所以我希望它位于它拥有的浏览器空间内。我将如何创建这些界限？我怎样才能让我的 div 移动。我应该使用 jquery 还是 JavaScript。

<div class="box">
<p>hello everyone</p>
</div> 

Answer 1

使用 CSS 可能会更容易。像这样的东西可以工作（显然根据需要扩展以适应您的布局）：

.box {
   margin-left:0px;
}
.box:hover {
   margin-left:5px;
}

Answer 2

正如 cmallard 所说：

.box {
   margin-left:0px;
}
.box:hover {
   margin-left:5px;
}

我可以在评论中看到你要求解释/翻译，所以我可以清楚他所说的话并告诉你：悬停就像 if 语句，如果用户将鼠标悬停/将鼠标放在这个当前类上，那么 CSS 代码将显示，现在其他部分没有显示任何内容。（5px 悬停 [if] 和 0px 没有悬停 [else]）。

希望我有帮助

Answer 3

演示

$('.box p').mouseover(function(){
  $('.box').css('margin-left','+=2');
});

为了使其不可滚动，使其fixed定位

.box{
    position:fixed;
}