Question

我试图制作一个<div>，当鼠标悬停在它上面时，它会滑落。我相信这将是我几乎没有经验的jQuery。

提前感谢您的帮助！

Answer 1

$(".your-div").mouseover(function() {
    $(this).animate({ marginTop: 300 });
})

Answer 2

#example:hover
{
  position: relative; margin-top: 40px;
  animation-name: slide-down; animation-duration: 2s;
}

@keyframes slide-down
{
  from { margin-top: 0px; } to { margin-top: 40px; }
}

Fiddle包含下层（-moz和-webkit）样式。 http://jsfiddle.net/b7Hqj/

Answer 3

可以在CSS中轻松完成一个向上/向下移动div的小悬停。这是一个例子：

HTML：

<div class="product">
<p> Product Info </p>

</div>

CSS：

.product {
border: 2px solid #999;
padding: 20px;
display: inline-block;
}
.product:hover {
transform: translateY(-15px); /* edit X/Y as per requirements */
}

body {
padding: 50px;
}

Woking示例：http://jsfiddle.net/pEBw5/

如果鼠标悬停在jQuery上，如何让div向下移动

3 个答案: