1

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

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

提前感谢所有帮助！

4

4 回答 4

2

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/

于 2013-03-26T01:46:35.083 回答
1

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

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

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

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

于 2013-03-26T01:45:00.250 回答
0

尝试这个：

HTML：

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

CSS：

#tothetop {position:relative}
#tothetop:hover {top:5px}
于 2013-03-26T01:52:18.873 回答
0 
<style>
  div:hover {
  margin-top:15;
  }
</style>

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

于 2013-03-26T01:52:23.723 回答