css - 他们是一种在css中向下滑动div的方法吗

Question

我正在尝试获取它，因此当您将鼠标悬停在 a<div>上时，它会向下滑动 5px，我希望它是用 css 制作的。（如果可能的话）

<div>我试图移动的名字是“tothetop” 。

提前感谢所有帮助！

Answer 1

CSS3 过渡会很好地完成这项工作！

LIVE DEMO

HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS：

.box{
  width:160px;
  height:80px;
  background:#f46;
  float:left;
  margin:5px;
  border-radius:10px;
  -webkit-transition: 0.4s; // you can use also 400ms if you want
          transition: 0.4s;
}
.box:hover{
  margin-top:10px;
}

---

如果你想回退到 jQuery：

jQuery LIVE DEMO

$('.box').on('mouseenter mouseleave', function( evt ){
  var pos = evt.type=='mouseenter' ? 10 : 5 ;
  $(this).stop().animate({marginTop : pos}, 500); 
});

^{（始终确保为您在 CSS 中为您的元素定义的 CSS 属性设置动画（在此示例中为margin））}

http://api.jquery.com/on/
http://api.jquery.com/stop/
http://api.jquery.com/animate/

Answer 2

使用 jquery 并在对象上调用 slidedown。

此处显示的示例：http: //api.jquery.com/slideDown/

或者如果您只是想移动东西而不是显示/隐藏，请使用 jquery animate

http://api.jquery.com/animate/

Answer 3

尝试这个：

HTML：

<div id="tothetop">
    this move down 5px
</div>

CSS：

#tothetop {position:relative}
#tothetop:hover {top:5px}

Answer 4

<style>
  div:hover {
  margin-top:15;
  }
</style>

这个简单的代码会将 div 向下滑动 15 个像素，你明白了