创建一个可移动的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

DEMO

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

要使其不可滚动，请将其定位fixed

.box{
    position:fixed;
}

Answer 3

正如cmallard所说：

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

我可以在评论中看到你要求解释/翻译，所以我可以说出他说的话并告诉你：hover就像if语句一样，如果用户将鼠标悬停在这个当前类上，那么css代码就会显示，现在其他部分什么也没有显示出来。 （5px左侧悬停[if]和0px左侧没有悬停[else]）。

希望我帮助