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

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 includes the downlevel (-moz and -webkit) styles. 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;
}

沃金示例：http: //jsfiddle.net/pEBw5/