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

【问题标题】：Is their a way to slide a div down in css他们是一种在css中向下滑动div的方法吗
【发布时间】：2013-03-15 16:57:52
【问题描述】：

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

我正在尝试移动的<div> 名称是“tothetop”。

提前感谢所有帮助！

【问题讨论】：

标签： css html hover slide

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

试试这个：

HTML：

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

CSS：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：